前端Web导出pdf文件问题

1、需求描述：

表格预览页面，点击‘导出’按钮，导出pdf文件

2、解决方案：

1. 通过html2pdf插件进行导出

   缺点：通过canvas转pdf，canvas的高度有限制（大概是14400），当页面数据过多时导出的文件内容都是空白；每页之间容易将内容截断

   

2. 利用浏览器打印功能导出

   优点：不限制内容高度，会自动分页内容不会被截断

   

3、解决方案代码： ``

//方案1:通过`html2pdf`插件进行导出
import { message } from 'antd';
import html2pdf from 'html2pdf.js';
import { reject } from 'lodash';

const exportPdf = (params = {}) =>
  new Promise((resolve, reject) => {
    const { filename = '', elementDom } = params;
    if (!elementDom) {
      message.error('导出失败，请重试！');
      reject();
    } else {
      // jspdf.js 插件对单页面的最大宽高限制 为 14400
      const limit = 14400;
      const format = 'A4';
      let scale = window.devicePixelRatio > 2 ? window.devicePixelRatio : 2; // 默认设备像素比
      if (elementDom.offsetHeight > limit) { 
        // 各浏览器对canvas大小有限制，设置scale，把设备像素比设小尽可能显示多内容，如果数据实在过多，导出的pdf文件内容全是空白
        scale = 1;
      }
      const opt = {
        filename, // 导出的pdf的名字
        image: { type: 'jpeg', quality: 1 }, // 用于生成PDF的图像类型和质量
        html2canvas: {
          scale,
          width: elementDom.offsetWidth, // canvas的宽度
          height: elementDom.offsetHeight, // canvas的宽度
          useCORS: true, // 是否尝试使用CORS从服务器加载图像
        },
        jsPDF: {
          orientation: 'p',
          format: format.toLowerCase(),
          pagesplit: true, // 页面纸张格式
        },
      };
      const worker = html2pdf();
      worker
        .set(opt)
        .from(elementDom)
        .save()
        .then(() => {
          resolve();
        });
    }
  }).catch(() => {
    reject();
  });

export { exportPdf };

//方案2:直接使用浏览器打印
document.execCommand('print') //调用浏览器打印

//注意：
1、body的高度不能写死，要由真正的内容去撑开；如果写死，则打印的内容高度就只有写死的高度；因为window打印是打印body内容

2、注意样式：
@media print {
    INPUT {
            display: none;
    }
    body {
            overflow: auto !important;
    }
}

4、其他：

1. 预览页面时尽可能使用纯html去显示，因为预览页面一般只做展示交互较少，用纯html去编写能优化页面显示性能