突破HTML2Canvas PDF打印性能瓶颈的策略
项目中使用html2canvas进行pdf打印，流程为：html渲染→canvas转换→jspdf生成pdf。此方法在图片数量少时效率尚可，但图片增多后，html2canvas的异步操作和耗时特性将成为瓶颈。本文针对此问题，提供优化方案。
文中提及的ignoreElements、Promise.all和Web Worker等优化方法均未奏效：ignoreElements因页面元素已精简至最小而失效；Promise.all虽然尝试并行处理，但实际执行仍为串行；Web Worker无法访问DOM，故无法与HTML2Canvas配合使用。
一种有效的替代方案是：直接嵌入PDF文件，利用浏览器原生打印功能。此方法绕过了HTML2Canvas的性能瓶颈。代码示例如下：
function loadpdf() {
axios({
method: 'get',
url: './20200714144950101.pdf',
responseType: 'blob',
}).then(function (response) {
let blob = new Blob([response.data], { type: response.data.type });
let url = URL.createObjectURL(blob);
document.getElementById('iframe').src = url;
});
}
此代码使用axios加载PDF文件，将其嵌入iframe，最终通过浏览器打印功能完成打印。
若对预览页面样式有特殊需求，建议使用pdf.js库进行渲染和打印。pdf.js提供更精细的控制和更佳的视觉效果，但需要开发者根据其API进行额外开发。
立即学习“前端免费学习笔记（深入）”；
