jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例） |
您所在的位置：网站首页 › 分页组件思路 › jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例） |
jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例）
|
业务需求
网页html生成A4大小分页的pdf，翻遍了整个互联网发现没有很系统的整理与分析，甚至对jsPDF的解析也没有几篇。遇到过几次，用的比较多，完成代码编写后特此整理分析，自我记录。 业务难点 存在图片/组件/文字被分割的现象，即分页处理 包括页头、页脚、上下安全间隔的情况 富文本分页情况 处理思路通过深度搜索优先遍历，从顶部遍历需要转换的HTML节点， 并将节点分为三种情况进行处理（1. 普通节点。2. 需要进行分页处理并且内部可能包含也需要分页处理子节点的节点。3. 需要进行分页内部不包含需要分页处理的节点，即深度搜索的终点节点），通过从高到低遍历维护一个分页数组pages，该数组记录每一页的起始位置，如：pages[0] 对应 第一页起始位置， pages[1] 对应 第二页起始位置 图解如下： 通过深度遍历后得出每页起始位置的数组，遍历数组，通过jspdf的addImage接口对canvas进行画面截取，由于addImage只能固定位置的左上角起始点，不能进行非常精确的上下定位截取（下一节会详解addImage)，会造成截取多余的内容（如上图页面1中pages[1] 下方的内容会和 页面2 中 pages[1] 下方的内容会一样（除长度外），而页面1中pages[1] 下方的内容是多余的（是属于页面2的内容））因此需要对页面不需要的内容 使用jspdf的addBlank进行空白遮挡处理。 jsPDF.addImage详解官方文档链接addImage - Documentation (artskydj.github.io) 需要注意的点是坐标（x,y） 的取值， (x,y)对应的是添加图片的左上角取值，宽高则是根据转化成canvas的宽高取值，图解如下 因此在对一个长图片进行截取时，往往将y值设未负数，让需要截取图片的起始位置落于当前的pdf页面内，在当前案例下，每一页的图片摆放坐标y = -pages[i] 文档链接 context2d - Documentation (artskydj.github.io) 该接口的参数 （x,y）坐标、宽高 与addImage接口的一致 当前pdf页需要的内容的高度为 pages[i] - pages[i-1]， 除去顶部这个高度外以下的内容都是不需要的，因此得到每一页添加空白的y坐标值为- pages[i] - pages[i-1]，高度h为一页pdf的高度（此处为A4页的高度） - pages[i] - pages[i-1]，宽度为A4宽度，x为0， 图解如下： 通过深度优先遍历操作，可以从高到低去遍历需要进行跨页判断的元素，检测是否跨页，并记录分页点，从而避免跨页问题。 1. 普通节点当遍历到普通节点，即不需要进行分页判断的节点时，只需要进行 2步操作： 当前节点距离顶部的高度 - pages最后一位元素的值（即上一页的分界点）得出的差值是否 大于 页面的高度 ， 如果大于,则证明当前节点已经跨页，进行操作pages.push(pages[pages.length - 1] + 一页PDF的高度) 对子节点进行深度遍历 2. 需要进行跨页判断，且内部也含有 可能跨页/需要进行跨页判断 的节点当元素进行到该类型的节点时， 需要进行3步操作： 需要进行与普通节点第一步相同的判断 （检测当前节点距离顶部的距离 + 节点自身的高度） 是否大于 （pages 最后一位元素（即当前页 顶部位置） + 一页PDF的高度（当前指A4的高度）） 如果条件为真，则证明该节点属于跨页元素，距离页面顶部距离的值top 是分页点，往pages中 push top 且由于内部还存在需要进行跨页检测的节点，因此需要对子节点进行深度遍历 3. 需要进行跨页判断，但内部不含有可能跨页/需要进行跨页判断 的节点， 即深度终点该节点只需要进行 内部含有可能跨页/需要进行跨页判断 的节点 的第一第二步操作， 由于内部不再含有，因此不需要遍历子节点，为搜索的叶子节点。 html2Canvas生成图片模糊导致导出的PDF也模糊的问题通过 scale 参数， 对canvas进行等比放大，可以使canvas生成的图片更清晰。 代码如下 // 将元素转化为canvas元素 // 通过 放大 提高清晰度 // width为内容宽度 async function toCanvas(element, width) { // canvas元素 const canvas = await html2canvas(element, { // allowTaint: true, // 允许渲染跨域图片 scale: window.devicePixelRatio * 3 // 增加清晰度 }); // 获取canavs转化后的宽度 const canvasWidth = canvas.width; // 获取canvas转化后的高度 const canvasHeight = canvas.height; // 高度转化为PDF的高度 const height = (width / canvasWidth) * canvasHeight; // 转化成图片Data const canvasData = canvas.toDataURL('image/jpeg', 1.0); //console.log(canvasData) return { width, height, data: canvasData }; } 样例及代码gitee仓库： output_pdf_demo: jsPDF + html2canvas , 网页HTML导出A4格式PDF 处理分页切割问题 (gitee.com) npm install & npm run serve 即可运行 分页效果： 富文本分页： table行分页： 组件分页： 样例比上述讲的情况内，引入了页眉、页脚、还有上下左右间距的情况，图解如下： 需要做的额外处理： 图片摆放的Y坐标由原来的-pages[i] 变成了 baseY + 页头元素高度 - pages[i] 中间实际内容部分与页眉/页脚之间的边距也需要进行遮白处理 内容的高度才为PDF页面的实际高度，判断分页的依据应该以内容高度为准 富文本文字的分页处理 核心代码 import jsPDF from 'jspdf'; import html2canvas from 'html2canvas'; import { message } from 'ant-design-vue'; const A4_WIDTH = 592.28; const A4_HEIGHT = 841.89; // 将元素转化为canvas元素 // 通过 放大 提高清晰度 // width为内容宽度 async function toCanvas(element, width) { // canvas元素 const canvas = await html2canvas(element, { // allowTaint: true, // 允许渲染跨域图片 scale: window.devicePixelRatio * 2 // 增加清晰度 }); // 获取canavs转化后的宽度 const canvasWidth = canvas.width; // 获取canvas转化后的高度 const canvasHeight = canvas.height; // 高度转化为PDF的高度 const height = (width / canvasWidth) * canvasHeight; // 转化成图片Data const canvasData = canvas.toDataURL('image/jpeg', 1.0); //console.log(canvasData) return { width, height, data: canvasData }; } /** * 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理) * @param {Object} param * @param {HTMLElement} param.element - 需要转换的dom根节点 * @param {number} [param.contentWidth=550] - 一页pdf的内容宽度，0-592.28 * @param {string} [param.filename='document.pdf'] - pdf文件名 * @param {HTMLElement} param.header - 页眉dom元素 * @param {HTMLElement} param.footer - 页脚dom元素 */ export async function outputPDF({ element, contentWidth = 550, footer, header, filename = "测试A4分页.pdf" }) { if (!(element instanceof HTMLElement)) { return; } // jsPDFs实例 const pdf = new jsPDF({ unit: 'pt', format: 'a4', orientation: 'p', }); // 一页的高度， 转换宽度为一页元素的宽度 const { width, height, data } = await toCanvas(element, contentWidth); // 添加页脚 async function addHeader(header, pdf, contentWidth) { const { height: headerHeight, data: headerData, width: hWidth } = await toCanvas(header, contentWidth); pdf.addImage(headerData, 'JPEG', 0, 0, contentWidth, headerHeight); } // 添加页眉 async function addFooter(pageNum, now, footer, pdf, contentWidth) { const newFooter = footer.cloneNode(true); newFooter.querySelector('.pdf-footer-page').innerText = now; newFooter.querySelector('.pdf-footer-page-count').innerText = pageNum; document.documentElement.append(newFooter); const { height: footerHeight, data: footerData, width: fWidth } = await toCanvas(newFooter, contentWidth); pdf.addImage(footerData, 'JPEG', 0, A4_HEIGHT - footerHeight, contentWidth, footerHeight) } // 添加 function addImage(_x, _y, pdf, data, width, height) { pdf.addImage(data, 'JPEG', _x, _y, width, height); } // 增加空白遮挡 function addBlank(x, y, width, height, pdf) { pdf.setFillColor(255, 255, 255); pdf.rect(x, y, Math.ceil(width), Math.ceil(height), 'F'); }; // 页脚元素 经过转换后在PDF页面的高度 const { height: tfooterHeight } = await toCanvas(footer, contentWidth) // 页眉元素 经过转换后在PDF的高度 const { height: theaderHeight } = await toCanvas(header, contentWidth); // 距离PDF左边的距离，/ 2 表示居中 const baseX = (A4_WIDTH - contentWidth) / 2; // 预留空间给左边 // 距离PDF 页眉和页脚的间距， 留白留空 const baseY = 15; // 出去页头、页眉、还有内容与两者之间的间距后 每页内容的实际高度 const originalPageHeight = (A4_HEIGHT - tfooterHeight - theaderHeight - 2 * baseY); // 元素在网页页面的宽度 const elementWidth = element.offsetWidth; // PDF内容宽度 和 在HTML中宽度 的比， 用于将 元素在网页的高度 转化为 PDF内容内的高度， 将 元素距离网页顶部的高度 转化为 距离Canvas顶部的高度 const rate = contentWidth / elementWidth // 每一页的分页坐标， PDF高度， 初始值为根元素距离顶部的距离 const pages = [rate * getElementTop(element)]; // 获取元素距离网页顶部的距离 // 通过遍历offsetParant获取距离顶端元素的高度值 function getElementTop(element) { let actualTop = element.offsetTop; let current = element.offsetParent; while (current && current !== null) { actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; } // 遍历正常的元素节点 function traversingNodes(nodes) { for (let i = 0; i < nodes.length; ++i) { const one = nodes[i]; // 需要判断跨页且内部存在跨页的元素 const isDivideInside = one.classList && one.classList.contains('divide-inside'); // 图片元素不需要继续深入，作为深度终点 const isIMG = one.tagName === 'IMG'; // table的每一行元素也是深度终点 const isTableCol = one.classList && ((one.classList.contains('ant-table-row'))); // 特殊的富文本元素 const isEditor = one.classList && (one.classList.contains('editor')); // 对需要处理分页的元素，计算是否跨界，若跨界，则直接将顶部位置作为分页位置，进行分页，且子元素不需要再进行判断 let { offsetHeight } = one; // 计算出最终高度 let offsetTop = getElementTop(one); // dom转换后距离顶部的高度 // 转换成canvas高度 const top = rate * (offsetTop) // 对于需要进行分页且内部存在需要分页（即不属于深度终点）的元素进行处理 if (isDivideInside) { // 执行位置更新操作 updatePos(rate * offsetHeight, top, one); // 执行深度遍历操作 traversingNodes(one.childNodes); } // 对于深度终点元素进行处理 else if (isTableCol || isIMG) { // dom高度转换成生成pdf的实际高度 // 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-box updatePos(rate * offsetHeight, top, one); } else if (isEditor) { // 执行位置更新操作 updatePos(rate * offsetHeight, top, one); // 遍历富文本节点 traversingEditor(one.childNodes) } // 对于普通元素，则判断是否高度超过分页值，并且深入 else { // 执行位置更新操作 updateNomalElPos(top) // 遍历子节点 traversingNodes(one.childNodes); } } return; } // 对于富文本元素，观察所得段落之间都是以 / jsPDF - Documentation (artskydj.github.io) 配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io) 【原创】jspdf+html2canvas生成多页pdf防截断处理 - 简书 (jianshu.com) |
【本文地址】