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