现象
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()