给页面内所有要转换成PDF的HTML元素添加一个class=“toPDF” 输出的时候，
遍历所有class="toPDF"的HTML元素
将它们逐个加入到pdf文档中，添加的时候如果超出的则添加一页

一、安装

npm install --save html2canvas
npm i jspdf --save

二、html

<div class="content" id="pdfDom"><div class="toPDF">pdf第一页内容</div><div class="toPDF">pdf第二页内容</div><div class="toPDF">pdf第三页内容</div><div class="toPDF">pdf第四页内容</div><!-- 每一块dom的class类设置成toPDF（自定义）以此处理内容分割，类似于将网页按pdf的形式进行分页 高度不固定-->
</div>

三、封装一个导出的方法

import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'/*** @param  pdfDom          要生成 pdf 的DOM元素（容器）* @param  padfName        PDF文件生成后的文件名字* *///打印
export function exportPDF(pdfDom, padfName) {//打印的内容var ele = document.getElementById(pdfDom);//根据html中需要被转成pdf的dom节点的class 筛选出来的List (防止文字被切断)let item = ele.querySelectorAll(".toPDF")let eleW = ele.offsetWidth// 获得该容器的宽let eleH = ele.offsetHeight// 获得该容器的高let eleOffsetTop = ele.offsetTop  // 获得该容器到文档顶部的距离let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离var canvas = document.createElement('canvas')var abs = 0let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）if (win_out > win_in) {// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半abs = (win_out - win_in) / 2    // 获得滚动条宽度的一半// console.log(a, '新abs');}canvas.width = eleW * 2    // 将画布宽&&高放大两倍canvas.height = eleH * 2var context = canvas.getContext('2d')context.scale(2, 2)context.translate(-eleOffsetLeft - abs, -eleOffsetTop)// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此// translate的时候，要把这个差值去掉var pdf = new jsPDF('', 'pt', 'a4')let position = 0 //页面偏移let pageHeight = 801.89 //PDF页面高度for (let i = 0; i < item.length; i++) {canvas = await html2canvas(item[i], {dpi: 300, useCORS: true})// console.log(item[i])var contentWidth = canvas.widthvar contentHeight = canvas.height// a4纸的尺寸[595.28,841.89]var imgWidth = 535.28 //图片宽度 原是595.38，因左右留白30，减去60var imgHeight = 595.28 / contentWidth * contentHeight //图片高度var pageData = canvas.toDataURL('image/jpeg', 1.0)if (imgHeight < pageHeight){ if (position === 0){ //页面偏移为0position = 30; //第一张图片，上边距留白30，页面偏移从30开始}}else { //页高剩余的高度不足放下当前图片高度，则另起一页pdf.addPage() //新增一张空白的页面position = 0 //页面偏移初始化pageHeight = 801.89 //页面高度初始化if (position === 0){position = 30; //第一张图片，上边距留白30，页面偏移从30开始}//pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight); //添加图片//position = position + imgHeight;//pageHeight = pageHeight - imgHeight;}pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight); //添加图片，30：为向左偏移30position = position + imgHeight; //新偏移 = 旧偏移 + 图片高度pageHeight = pageHeight - imgHeight; // 新页面高度 = 剩余页高 - 图片高度}pdf.save(padfName + '.pdf')}

四、使用方法

//导入
import {exportPDF} from '你封装导出方法的路径'//调用此方法将网页导出pdf
exportPDF('pdfDom', '文件标题')