前端Web导出pdf文件问题

267 阅读2分钟

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去编写能优化页面显示性能