标签导航：

html2canvas生成pdf打印慢怎么办？

优化HTML2Canvas PDF打印性能：告别耗时难题

项目中使用HTML2Canvas生成PDF打印预览时，常常面临性能瓶颈：网页内容复杂、图片数量增多，都会导致转换时间大幅增加，严重影响用户体验。本文将分析问题根源并提供有效的优化策略。

原方案采用HTML渲染、HTML2Canvas转换为Canvas、Canvas转换为JPEG图片URL，最后用jsPDF创建PDF并添加图片的方式。这种方法在图片数量少时效果良好，但随着图片数量增加，HTML2Canvas的异步操作和耗时特性会导致性能急剧下降。文中尝试了多种优化方案，例如ignoreElements、Promise.all并行处理以及Web Worker后台线程处理，但都因各种限制而未能取得理想效果：ignoreElements粒度已降至最低；Promise.all虽然逻辑上并行，但实际执行仍然串行；Web Worker无法访问DOM，限制了HTML2Canvas的使用。

高效替代方案：直接嵌入PDF

一种更有效的替代方案是直接将PDF文件嵌入页面，然后利用浏览器的打印功能。此方法避免了HTML2Canvas的耗时转换，能显著提升性能。代码示例如下：

<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库进行渲染和打印，以实现更精细的控制。 选择合适的方案取决于项目的具体需求和复杂程度。