网页导出 pdf 内容被截断的终极解决方案

import jsPDF from "jspdf"; import html2canvas from "html2canvas"; /** * 生成pdf(处理多页pdf截断问题) * @param {Object} param * @param {HTMLElement} param.element - 需要转换的dom根节点 * @param {number} [param.contentWidth=550] - 一页pdf的内容宽度，0-595 * @param {number} [param.contentHeight=800] - 一页pdf的内容高度，0-842 * @param {string} [param.outputType='save'] - 生成pdf的数据类型，默认是save下载下来，添加了'file'类型，其他支持的类型见http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#output * @param {number} [param.scale=window.devicePixelRatio * 2] - 清晰度控制,canvas放大倍数,默认像素比*2 * @param {string} [param.direction='p'] - 纸张方向，l横向，p竖向，默认A4纸张 * @param {string} [param.fileName='document.pdf'] - pdf文件名，当outputType='file'时候，需要加上.pdf后缀 * @param {number} param.baseX - pdf页内容距页面左边的高度，默认居中显示，为(A4宽度 - contentWidth) / 2) * @param {number} param.baseY - pdf页内容距页面上边的高度，默认 15px * @param {HTMLElement} param.header - 页眉dom元素 * @param {HTMLElement} param.footer - 页脚dom元素 * @param {string} [param.isPageMessage=false] - 是否显示当前生成页数状态 * @param {string} [param.isTransformBaseY=false] - 是否将baseY按照比例缩小(一般固定A4页边距时候可以用上) * @returns {Promise} 根据outputType返回不同的数据类型,是一个对象，包含pdf结果及需要计算的元素位置信息 */ export class PdfLoader { constructor(element, param = {}) { if (!(element instanceof HTMLElement)) { throw new TypeError("element节点请传入dom节点"); } this.element = element; this.contentWidth = param.contentWidth || 550; this.outputType = param.outputType || "save"; this.fileName = param.fileName || "导出的pdf文件"; this.scale = param.scale; this.baseX = param.baseX; this.baseY = param.baseY == null ? 15 : param.baseY; this.isTransformBaseY = param.isTransformBaseY || false; this.header = param.header; this.footer = param.footer; this.isPageMessage = param.isPageMessage; this.direction = param.direction || "p"; // 默认竖向,l横向 this.A4_WIDTH = 595; // a4纸的尺寸[595,842],单位像素 this.A4_HEIGHT = 842; if (this.direction === "l") { // 如果是横向，交换a4宽高参数 [this.A4_HEIGHT, this.A4_WIDTH] = [this.A4_WIDTH, this.A4_HEIGHT]; } // 页眉页脚高度 this.pdfFooterHeight = 0; this.pdfHeaderHeight = 0; this.pdf = null; this.rate = 1; // 缩放比率 this.pages = []; // 当前分页数据 } /** * 将元素转化为canvas元素 * @param {HTMLElement} element - 当前要转换的元素 * @param {width} width - 内容宽度 * @returns */ async createAndDisplayCanvas() { let imgData = await this.toCanvas(this.element, this.contentWidth); let canvasEle = document.createElement("canvas"); canvasEle.width = imgData.width; canvasEle.height = imgData.height; canvasEle.style.position = "fixed"; canvasEle.style.top = "0"; canvasEle.style.right = "0"; this.canvasEle = canvasEle; document.body.appendChild(canvasEle); const ctx = canvasEle.getContext("2d"); const img = await this.loadImage(imgData.data); ctx.drawImage(img, 0, 0, imgData.width, imgData.height); this.scan(ctx, imgData); } // url 图片路径 /** * 加载图片资源 * * @param url 图片资源链接 * @returns 返回Promise对象，当图片加载成功时resolve，否则reject */ loadImage(url) { return new Promise((resolve, reject) => { const img = new Image(); img.setAttribute("crossOrigin", "anonymous"); img.src = url; img.onload = () => { // 当图像加载完成后进行resolve resolve(img); }; img.onerror = () => { reject(new Error("图像加载失败")); }; }); } /** * 扫描图像并确定每一页的起始高度 * * @param ctx 绘制上下文 * @param imgData 图像数据 * @throws 当ctx或imgData为null/undefined时抛出错误 */ scan(ctx, imgData) { if (!ctx || !imgData) { throw new Error("Invalid arguments: ctx or imgData is null/undefined"); } let originalPageHeight = parseInt(this.originalPageHeight, 10); let shouldContinueScanning = true; while (shouldContinueScanning) { // console.log(this.pages); // 调试代码，生产环境中应去除 let imageData = ctx.getImageData(0, originalPageHeight, imgData.width, 1); const uniqueArr = Array.from(new Set(imageData.data)); if (uniqueArr.length === 1) { this.pages.push(originalPageHeight); originalPageHeight += parseInt(this.originalPageHeight, 10); if (originalPageHeight > imgData.height) { shouldContinueScanning = false; if (this.canvasEle) { this.canvasEle.remove(); this.canvasEle = null; } } } else { if (originalPageHeight == this.pages.at(-1)) { // 防止无限递减 shouldContinueScanning = false; } else { originalPageHeight = Math.max(0, originalPageHeight - 1); // 防止originalPageHeight变为负数 } } } } async toCanvas(element, width) { // canvas元素 let canvas = await html2canvas(element, { allowTaint: true, // 允许渲染跨域图片 scale: this.scale || window.devicePixelRatio * 2, // 增加清晰度 useCORS: true, // 允许跨域 }); // 获取canvas转化后的宽度 const canvasWidth = canvas.width; // 获取canvas转化后的高度 const canvasHeight = canvas.height; // 高度转化为PDF的高度 const height = (width / canvasWidth) * canvasHeight; // 转化成图片Data const canvasData = canvas.toDataURL("image/jpeg", 1.0); canvas = null; return { width, height, data: canvasData }; } /** * 生成pdf方法，外面调用这个方法 * @returns {Promise} 返回一个promise */ getPdf() { // 滚动置顶,防止顶部空白 window.pageYOffset = 0; document.documentElement.scrollTop = 0; document.body.scrollTop = 0; return new Promise(async (resolve, reject) => { // jsPDF实例 const pdf = new jsPDF({ unit: "pt", // mm,pt,in,cm format: "a4", orientation: this.direction, }); this.pdf = pdf; let pdfFooterHeight = 0; let pdfHeaderHeight = 0; // 距离PDF左边的距离，/ 2 表示居中 ,,预留空间给左边, 右边，也就是左右页边距 let baseX = (this.A4_WIDTH - this.contentWidth) / 2; // 距离PDF 页眉和页脚的间距， 留白留空 let baseY = this.baseY; // 元素在网页页面的宽度 const elementWidth = this.element.scrollWidth; // PDF内容宽度 和 在HTML中宽度 的比， 用于将 元素在网页的高度 转化为 PDF内容内的高度， 将 元素距离网页顶部的高度 转化为 距离Canvas顶部的高度 const rate = this.contentWidth / elementWidth; this.rate = rate; if (this.isTransformBaseY) { this.baseY = baseY = baseY * rate; } // 页脚元素 经过转换后在PDF页面的高度 if (this.footer) { pdfFooterHeight = (await this.toCanvas(this.footer, this.A4_WIDTH)) .height; this.pdfFooterHeight = pdfFooterHeight; } // 页眉元素 经过转换后在PDF的高度 if (this.header) { pdfHeaderHeight = (await this.toCanvas(this.header, this.A4_WIDTH)) .heig