优化HTML2Canvas：解决PDF打印耗时难题

项目中使用HTML2Canvas将HTML内容转换为Canvas，再生成PDF，遇到性能瓶颈：图片数量增加导致耗时显著增长。本文分析原方案问题，并提出优化策略。

原方案流程：HTML渲染 -> HTML2Canvas转换 -> JPEG图片URL -> jsPDF创建PDF。由于PDF模板元素尺寸动态变化，可能需要多次转换生成多张图片，造成性能问题。

以下优化尝试均未奏效：

立即学习“前端免费学习笔记（深入）”；

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

1. ignoreElements参数无效：由于换页处理等原因，HTML元素粒度已最小化，无法通过排除元素来减少转换时间。
2. Promise.all并行处理失败：代码逻辑上实现了HTML2Canvas并行处理，但实际执行未加速，可能受限于浏览器或线程资源。
3. Web Worker无法访问DOM：HTML2Canvas依赖DOM操作，无法在Web Worker中运行。

高效解决方案：直接嵌入PDF并利用浏览器打印功能

为绕过HTML2Canvas性能瓶颈，建议直接将PDF文件嵌入页面，利用浏览器打印功能。此方案通过加载PDF到<iframe></iframe>，然后调用浏览器打印功能实现PDF打印。代码示例如下：

<iframe frameborder="0" id="iframe" src=""></iframe>

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;
  });
}

高级方案：使用pdf.js库实现更精细的控制

如果对预览页面样式有特殊要求，可以使用pdf.js库进行渲染和打印，它提供更精细的控制和渲染能力。