织梦CMS - 轻松建站从此开始!

abg欧博官网|登陆|游戏|

How to fix content cut off issues in jspdf ?

时间:2025-12-05 18:03来源: 作者:admin 点击: 4 次
I am using jspsf and html2canvas to convert the components into a PDF. Below is the code for that, function generatePDF() { const input = document.get

I am using jspsf and html2canvas to convert the components into a PDF.

Below is the code for that,

function generatePDF() { const input = document.getElementById("pdf"); html2canvas(input, { logging: true, letterRendering: 1, scale: 2, windowWidth: 1440, useCORS: true }).then((canvas) => { var imgData = canvas.toDataURL("image/png"); var imgWidth = 210; var pageHeight = 295; var imgHeight = (canvas.height * imgWidth) / canvas.width; var heightLeft = imgHeight; var doc = new jsPDF("p", "mm"); var position = 0; doc.addImage(imgData, "jpeg", 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; doc.addPage(); doc.addImage(imgData, "jpeg", 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } const pages = doc.internal.getNumberOfPages(); for (let j = 1; j < pages + 1; j++) { let horizontalPos = imgWidth / 2; //Can be fixed number let verticalPos = pageHeight - 10; //Can be fixed number doc.setPage(j); doc.setFontSize(10); doc.text(`${j} of ${pages}`, horizontalPos, verticalPos, { align: "center" //Optional text styling}); }); } doc.save("output.pdf"); }); }

is there any way to fix this issue? Please help me to solve this one.

Here you can get the working demo link - https://codesandbox.io/s/react-component-to-pdf-goe-page-cutting-3rnl29?file=/src/App.js:412-1697

(责任编辑:)
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:
发布者资料
查看详细资料 发送留言 加为好友 用户等级: 注册时间:2025-12-14 17:12 最后登录:2025-12-14 17:12
栏目列表
推荐内容