前言
废话有时间再写，这个功能是在其他人分享的源代码的基础上修改的，只为了完成功能。
方法调用
var $el = document.getElementById("table");
exportToPDF($el);jspdf打印
function exportToPDF(element) {var pdf = jspdf.jsPDF('', 'pt', 'a4');// A4纸张的宽度和高度var A4_WIDTH = 592.28;var A4_HEIGHT = 841.89;// A4实际内容宽度var CONTENT_WIDTH = 560;// 距离PDF左边的距离，/ 2 表示居中var baseX = (A4_WIDTH - CONTENT_WIDTH) / 2; // 预留空间给左边var baseY = 15;// 除去间距后,页面内容的实际高度var CONTENT_HEIGHT = A4_HEIGHT - 2 * baseY;// PDF内容宽度和在HTML中宽度的比值var rate = CONTENT_WIDTH / element.getBoundingClientRect().width;// 每一页的分页坐标， PDF高度， 初始值为根元素距离顶部的距离var pages = [rate * getElementTop(element)];//计算页面的高度var pageHeight = Math.ceil(rate * A4_HEIGHT);// 一页的高度， 转换宽度为一页元素的宽度toCanvas(element, CONTENT_WIDTH).then(function (canvas) {var width = canvas.width;var height = canvas.height;var data = canvas.data;// 深度遍历节点的方法traversingNodes(document.querySelectorAll("tr"));// 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，// 所以要把它修正，让其值是以真实的打印元素顶部节点为准var newPages = pages.map((item) => item - pages[0]);// 根据分页位置 开始分页for (var i = 0; i < newPages.length; ++i) {// 根据分页位置新增图片addImage(baseX,baseY - newPages[i],pdf,data,width,height);// 对于除最后一页外，对 内容 的多余部分进行遮白处理if (i < newPages.length - 1) {// 获取当前页面需要的内容部分高度var imageHeight = newPages[i + 1] - newPages[i];console.log(12121, baseY + imageHeight, baseY * 2 + imageHeight);// 对多余的内容部分进行遮白addBlank(0,baseY + imageHeight,A4_WIDTH,A4_HEIGHT - imageHeight);}// 若不是最后一页，则分页if (i !== newPages.length - 1) {// 增加分页pdf.addPage();}}pdf.save('a.pdf');});// 添加function addImage(_x, _y, pdfInstance, base_data, _width, _height) {pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height);}// 增加空白遮挡function addBlank(x, y, _width, _height) {pdf.setFillColor(255, 255, 255);pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');}// 获取该元素到页面顶部的高度(注意滑动scroll会影响高度)function getElementTop(contentElement) {if (contentElement.getBoundingClientRect) {var rect = contentElement.getBoundingClientRect() || {};// 考虑滚动条对高度的影响var topDistance = rect.top + window.scrollY;return topDistance;}}// 遍历元素节点function traversingNodes(nodes, height) {for (var element of nodes) {var one = element;// table的每一行元素也是深度终点var isTableRow = one.nodeName == 'tr';// 对需要处理分页的元素，计算是否跨界，若跨界，则直接将顶部位置作为分页位置，进行分页，且子元素不需要再进行判断var { offsetHeight } = one;// 计算出最终高度var offsetTop = getElementTop(one);// dom转换后距离顶部的高度// 转换成canvas高度var top = rate * offsetTop;var rateOffsetHeight = rate * offsetHeight;// 对于深度终点元素进行处理if (isTableRow) {// dom高度转换成生成pdf的实际高度// 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-boxupdateTablePos(rateOffsetHeight, top);}// 对于普通元素，则判断是否高度超过分页值，并且深入else {// 执行位置更新操作updateNormalElPos(top);// 遍历子节点traversingNodes(one.childNodes);}updatePos(height);}}// 普通元素更新位置的方法// 普通元素只需要考虑到是否到达了分页点，即当前距离顶部高度 - 上一个分页点的高度 大于 正常一页的高度，则需要载入分页点function updateNormalElPos(top) {if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >=CONTENT_HEIGHT) {pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + CONTENT_HEIGHT);}}function updateTablePos(eHeight, top) {// 如果高度已经超过当前页，则证明可以分页了if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= CONTENT_HEIGHT) {pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + CONTENT_HEIGHT);} else if (top + eHeight - (pages.length > 0 ? pages[pages.length - 1] : 0) > CONTENT_HEIGHT&& top !== (pages.length > 0 ? pages[pages.length - 1] : 0)) {// 若 距离当前页顶部的高度 加上元素自身的高度 大于 一页内容的高度, 则证明元素跨页，将当前高度作为分页位置pages.push(top);}}function updatePos(height) {while (pages[pages.length - 1] + CONTENT_HEIGHT < height) {pages.push(pages[pages.length - 1] + CONTENT_HEIGHT);}}
};html2canvas转为图片
function toCanvas(element, width) {if (!element) {return Promise.resolve({ width: width, height: 0 });}return new Promise(function (resolve, reject) {html2canvas(element, {// allowTaint: true, // 允许渲染跨域图片scale: 1.4, // 增加清晰度dpi: 300,useCORS: true // 允许跨域}).then(function (canvas) {// 获取canvas转化后的宽高var canvasWidth = canvas.width;var canvasHeight = canvas.height;// html页面生成的canvas在pdf中的高度var height = (width / canvasWidth) * canvasHeight;// 转化成图片Datavar canvasData = canvas.toDataURL('image/jpeg', 1.0);resolve({ width: width, height: height, data: canvasData });}).catch(function (error) {reject(error);});});
}参考：
JSPDF + html2canvas A4分页截断
JSPDF + html2canvas A4分页截断源代码
效果演示 （大概就是这样）
