diff --git a/resources/qiye.html b/resources/qiye.html index 164c786..a992c15 100644 --- a/resources/qiye.html +++ b/resources/qiye.html @@ -2213,102 +2213,122 @@ requestAnimationFrame(function () { requestAnimationFrame(function () { try { - html2canvas(pageEl, { - scale: 1.5, - useCORS: true, - allowTaint: false, - backgroundColor: "#ffffff", - scrollX: 0, - scrollY: 0, - windowWidth: pageEl.scrollWidth, - windowHeight: pageEl.scrollHeight, - onclone: function (clonedDoc, node) { - var body = clonedDoc.body; - if (body) { - body.style.backgroundColor = "#ffffff"; - body.style.overflow = "visible"; - } - var clonePage = clonedDoc.querySelector(".page"); - if (clonePage) { - clonePage.style.overflow = "visible"; - clonePage.style.backgroundColor = "#ffffff"; - } - }, - }) - .then(function (canvas) { - if (!canvas.width || !canvas.height) { - console.error("截图为空,宽或高为 0"); + (function () { + var scale = 1.25; + var pdf = new jspdf.jsPDF("p", "mm", "a4"); + var pageWidthMm = pdf.internal.pageSize.getWidth(); + var pageHeightMm = pdf.internal.pageSize.getHeight(); + + // 以元素宽度为基准,计算每一页对应的像素高度(避免生成超长大图导致 jsPDF 白页) + var targetWidthPx = Math.max( + 1, + Math.floor(pageEl.scrollWidth), + ); + var pageHeightPx = Math.max( + 1, + Math.floor((targetWidthPx * pageHeightMm) / pageWidthMm), + ); + var totalHeightPx = Math.max( + 1, + Math.floor(pageEl.scrollHeight), + ); + + var offsetY = 0; + var pageIndex = 0; + + function renderSlice() { + var sliceHeight = Math.min( + pageHeightPx, + totalHeightPx - offsetY, + ); + if (sliceHeight <= 0) { + // 结束,保存 + var fileName = "企业全景报告.pdf"; + if ( + reportData && + reportData.entName && + typeof reportData.entName === "string" + ) { + fileName = + reportData.entName + + "_企业全景报告.pdf"; + } + pdf.save(fileName); restoreBtn(); return; } - // 调试:确认截图是否全白/是否有内容 - try { - var ctx2d = canvas.getContext("2d"); - if (ctx2d) { - var p = ctx2d.getImageData(0, 0, 1, 1).data; - console.info( - "PDF截图信息", - { - w: canvas.width, - h: canvas.height, - firstPixel: Array.prototype.slice.call(p), - }, + + html2canvas(pageEl, { + scale: scale, + useCORS: true, + allowTaint: false, + backgroundColor: "#ffffff", + x: 0, + y: offsetY, + width: targetWidthPx, + height: sliceHeight, + scrollX: 0, + scrollY: 0, + windowWidth: targetWidthPx, + windowHeight: sliceHeight, + onclone: function (clonedDoc) { + var body = clonedDoc.body; + if (body) { + body.style.backgroundColor = "#ffffff"; + body.style.overflow = "visible"; + } + var clonePage = clonedDoc.querySelector(".page"); + if (clonePage) { + clonePage.style.overflow = "visible"; + clonePage.style.backgroundColor = "#ffffff"; + } + }, + }) + .then(function (canvas) { + if (!canvas.width || !canvas.height) { + console.error("分片截图为空,宽或高为 0", { + offsetY: offsetY, + sliceHeight: sliceHeight, + }); + restoreBtn(); + return; + } + // 调试:输出每页分片信息 + console.info("PDF分片截图信息", { + page: pageIndex + 1, + w: canvas.width, + h: canvas.height, + offsetY: offsetY, + sliceHeight: sliceHeight, + totalHeightPx: totalHeightPx, + }); + + var imgData = canvas.toDataURL("image/jpeg", 0.9); + + if (pageIndex > 0) pdf.addPage(); + pdf.addImage( + imgData, + "JPEG", + 0, + 0, + pageWidthMm, + pageHeightMm, ); - } - } catch (e) { - console.warn("读取截图像素失败(可能被跨域资源污染)", e); - } - var imgData = canvas.toDataURL( - "image/jpeg", - 0.95, - ); - var pdf = new jspdf.jsPDF("p", "mm", "a4"); - var pageWidth = pdf.internal.pageSize.getWidth(); - var pageHeight = pdf.internal.pageSize.getHeight(); - var imgWidth = pageWidth; - var imgHeight = - (canvas.height * imgWidth) / canvas.width; - var position = 0; - var heightLeft = imgHeight; - pdf.addImage( - imgData, - "JPEG", - 0, - position, - imgWidth, - imgHeight, - ); - heightLeft -= pageHeight; - while (heightLeft > 0) { - position = heightLeft - imgHeight; - pdf.addPage(); - pdf.addImage( - imgData, - "JPEG", - 0, - position, - imgWidth, - imgHeight, - ); - heightLeft -= pageHeight; - } - var fileName = "企业全景报告.pdf"; - if ( - reportData && - reportData.entName && - typeof reportData.entName === "string" - ) { - fileName = - reportData.entName + - "_企业全景报告.pdf"; - } - pdf.save(fileName); - restoreBtn(); - }) - .catch(function (e) { - console.error("生成 PDF 失败", e); - restoreBtn(); - }); + + pageIndex += 1; + offsetY += sliceHeight; + + // 给 UI 一点喘息,避免长任务卡死 + setTimeout(renderSlice, 0); + }) + .catch(function (e) { + console.error("生成 PDF 失败(分片截图阶段)", e); + restoreBtn(); + }); + } + + renderSlice(); + })(); } catch (e) { console.error("触发生成 PDF 失败", e); restoreBtn();