需求：最近有个需求，需要导出一份报告文档，有封面页和内容页，封面页内容不多，需要作为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，然后去下载。