前端导出pdf，多个元素一起使用

需求：最近有个需求，需要导出一份报告文档，有封面页和内容页，封面页内容不多，需要作为pdf单独的一页，内容页的内容很丰富，一页展示不完，那就需要分页展示。

思路：我的实现方法是封面页作为一个元素，内容页作为一个元素，内容页通过pdf分页后和之前的封面页组合在一起，就成了一份完整的pdf报告。

实现：先是用到插件，下载后引用：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

然后全局设置一个变量：

const pdf = new jsPDF('p', 'pt', 'a4');

然后改下导出pdf的方法：参数1是元素的id名，参数2是在函数最后确认要不要加一页空白pdf.

  exportPage = async (node,adds) =>{
    const element = document.getElementById(node);    // 这个dom元素是要导出pdf的容器
    const w = element.offsetWidth;    // 获得该容器的宽
    const h = element.offsetWidth;    // 获得该容器的高
    const {offsetTop} = element;    // 获得该容器到文档顶部的距离
    const {offsetLeft} = element;    // 获得该容器到文档最左的距离
    const canvas = document.createElement("canvas");
    let abs = 0;
    const winI = document.body.clientWidth;    // 获得当前可视窗口的宽度（不包含滚动条）
    const winO = window.innerWidth;    // 获得当前窗口的宽度（包含滚动条）
    if (winO > winI) {
      abs = (winO - winI) / 2;    // 获得滚动条长度的一半
    }
    canvas.width = w * 2;    // 将画布宽&&高放大两倍
    canvas.height = h * 2;
    const context = canvas.getContext("2d");
    context.scale(2, 2);
    context.translate(-offsetLeft - abs, -offsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉
    await html2canvas(element,{
      allowTaint: true,
      scale: 2 // 提升画面质量，但是会增加文件大小
    }).then( (canvas) => {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      // 一页pdf显示html页面生成的canvas高度;
      const pageHeight = contentWidth / 592.28 * 841.89;
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight;
      // 页面偏移
      let position = 0;
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28;
      const imgHeight = 592.28 / contentWidth * contentHeight;
      const pageData = canvas.toDataURL('image/jpeg', 1.0);
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      }else{  // 分页
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight;
          position -= 841.89;
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
    });
    if(adds){
      pdf.addPage(); // 不同元素之间的pdf合在一起需要先加个空白页
    }
  }

 使用方法：

<div>
 <Button
    onClick={
     ()=>{
         this.exportPage("pageOne",true).then(()=>{
              this.exportPage("pageTow").then(()=>{
                  pdf.save(`报告.pdf`);
              })
          })
 }} 

>导出 </Button>
 <div id="pageOne"> 111</div> 
 <div id="pageTow"> 222</div> 
</div>

多个元素之间使用，需要分pdf页的先后顺序，所以存在一个回调地域，只有最里面的一层不需要加第二个参数，一层等一层去生成完整的pdf，然后去下载。