需求：最近有个需求，需要导出一份报告文档，有封面页和内容页，封面页内容不多，需要作为pdf单独的一页 ， 内容页的内容很丰富，一页展示不完，那就需要分页展示 。
思路：我的实现方法是封面页作为一个元素，内容页作为一个元素 ， 内容页通过pdf分页后和之前的封面页组合在一起，就成了一份完整的pdf报告 。
实现：先是用到插件，下载后引用：
import html2canvas from 'html2canvas';import jsPDF from 'jspdf';然后全局设置一个变量：
const pdf = new jsPDF('p', 'pt', 'a4');然后改下导出pdf的方法：参数1是元素的id名 ， 参数2是在函数最后确认要不要加一页空白pdf.
【前端多元素合并导出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 = https://www.itzhengshu.com/pdf/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合在一起需要先加个空白页}}使用方法：
111222 多个元素之间使用，需要分pdf页的先后顺序，所以存在一个回调地域，只有最里面的一层不需要加第二个参数 ， 一层等一层去生成完整的pdf，然后去下载 。