首页 前端知识 html2pdf.js生成PDF空白页面问题解决办法

html2pdf.js生成PDF空白页面问题解决办法

2025-03-16 12:03:33 前端知识 前端哥 198 704 我要收藏

现象

1、Scale参数1.8时,安卓手机在20页以上可能爆掉生成空白页

2、Scale参数1.8时,苹果手机在5页以上可能爆掉生成空白页

原因是浏览器支持画布的尺寸大小限制

解决办法

分页生成,一个元素一页这样不可能超过限制尺寸。

查到解决代码(希望能帮助到大家)如下:

//参数根据需要调整
var opt = {
margin: 0,
filename: name,
image: { type: "jpeg", quality: 0.98 }, //0.98
html2canvas: { scale: 1.8, useCORS: true },
jsPDF: { unit: "pt", format: "a4" },
pagebreak: { mode: ["css", "legacy"] },
};
//需要处理的页面的元素数组,每一页一个element
let elements =[]
let worker = html2pdf().set(opt).from(elements[0]);
if (elements.length > 1) {
worker = worker.toPdf();
elements.slice(1).forEach(async (element) => {
worker = worker
.get("pdf")
.then((pdf) => {
pdf.addPage();
})
.from(element)
.toContainer()
.toCanvas()
.toPdf();
});
}
worker.save()
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23860.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
浏览器升级提示:您的浏览器版本较低,建议您立即升级为知了极速浏览器,极速、安全、简约,上网速度更快!立即下载
复制成功!