React实战(7)——Ant Design Pro项目下载多页PDF文件

1、安装插件

npm install jspdf --save
npn install html2canvas --save // 导出下载Excel也会用到

2、实现代码

/**
 * #content为id为content下的下载内容
 * scale: 2 - 2倍图保证清晰度
 * addImage中参数，第三个参数590为pdf宽度，第四个参数为页码*每页高度
 * doc.addPage()，每绘制一页需要调用addPage增加一页
 */
  html2canvas(document.querySelector('#content'), { scale: 2 }).then(canvas => {
      const contentHeight = canvas.height;
      const pageNum = Math.floor(contentHeight / 2 / 1092);
      // 使用toDataURL转化为Base64编码
      const pageData = canvas.toDataURL('image/jpeg', 1.0);
      // 参数：纵向横向选择：'p'纵向，'l'横向，
      // 第二个单位，第三个尺寸格式，如[200,300]，可以也直接写'a4'等标准纸张大小
      const doc = new JsPdf('p', 'pt', 'a4');
      // 参数：图片内容，左偏移，上偏移，宽度，高度，a4大小的宽高为595.28，841.89
      doc.addImage(pageData, 0, 0, 590, 841 * pageNum, 'img');
      if (pageNum > 1) {
        for (let i = 1; i < pageNum; i += 1) {
          doc.addPage();
          doc.addImage(pageData, 0, -i * 841, 590, 841 * pageNum, 'img');
        }
      }
      doc.save('健康报告.pdf'); // 参数：导出文件的命名
  });

• 由于需求是保存几十页的打印报告，用这个插件保存的pdf到第8页后背景和图片就不显示了，文字还会显示，用插件保存的是30M左右，用window.print()保存的只有3.2M，并且清晰度上用window.print()保存的要清晰些
• 由于8页以后页面显示问题，就暂时先用window.print()保存，之后会研究看是否有更好的替代插件
• 8页以内保存的pdf还是可以实现的
• 参考了很多网上关于pdf.js的保存方案，大多数都是保存两三页的demo，在做下载动态就算多页的情况下费了很大劲，最后还是在8页以后翻车了，以后找到好的方案再补充