使用jsPDF结合Canvas导出PDF速度慢、文件过大如何优化？

你的现有代码存在两个核心问题：一是将PNG格式的画布数据强制转为JPG插入PDF，存在冗余转换开销；二是一次性渲染全量内容为超大画布再分页偏移插入，导致单张图片体积过大、重复写入PDF，这是导出慢、文件大的核心原因，具体优化方案如下：

一、减小PDF体积的优化方案 #

• 调整图片导出格式与质量：把canvas.toDataURL("image/png", 1.0)修改为canvas.toDataURL("image/jpeg", 0.7)，质量参数可根据实际清晰度要求在0.5-0.8区间调整，JPG格式比PNG压缩率高60%以上，直接从源头上降低图片体积。
• 降低canvas渲染分辨率：html2canvas默认会按设备像素比渲染，高DPI屏幕下生成的画布尺寸是实际尺寸的2-3倍，体积直接翻倍，调用时可手动指定scale参数，例如html2canvas($(".report")[0], {scale: 1.2})，平衡清晰度与体积。
• 替换全图切割逻辑为逐页渲染：你当前是把超长的.report一次性渲染为超大画布再切割分页，单张图片体积极高，改成按PDF单页高度分段渲染对应区域的内容，每次只生成单页大小的画布，避免超大图片的体积开销。

二、提升导出速度的优化方案 #

• 关闭html2canvas冗余功能：调用html2canvas时禁用不需要的配置，例如{useCORS: false, logging: false, removeContainer: true}，没有跨域图片时关闭useCORS、关闭日志输出、渲染后自动清理临时容器，可减少20%-30%的渲染耗时。
• 避免重复写入图片数据：你现有代码循环插入分页时，每次都把整张大图写入PDF，jsPDF会重复存储同一份图片数据，改用逐页渲染逻辑后，每页只写入当前页的小图，避免重复数据写入。
• 拆分渲染任务避免阻塞：如果内容特别长，可把分页渲染逻辑拆分为异步微任务处理，避免阻塞主线程导致页面卡顿，感知上的导出速度会明显提升。

优化后参考代码 #

$('#print').click(function (e) { 
  e.preventDefault();
  const HTML_Width = $(".report").width();
  const top_left_margin = 1;
  const PDF_Width = HTML_Width + (top_left_margin * 2);
  const PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
  const pageHeight = PDF_Height - top_left_margin * 2;
  const totalPDFPages = Math.ceil($(".report").height() / pageHeight);
  
  const pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
  
  // 逐页渲染逻辑
  async function renderPage(pageNum) {
    const offsetY = -pageNum * pageHeight;
    const canvas = await html2canvas($(".report")[0], {
      scale: 1.2, // 可根据清晰度需求调整
      useCORS: false, // 存在跨域图片时再开启
      logging: false,
      y: offsetY,
      height: pageHeight,
      windowHeight: pageHeight
    });
    const imgData = canvas.toDataURL("image/jpeg", 0.7); // 可根据清晰度需求调整质量
    if (pageNum > 0) pdf.addPage(PDF_Width, PDF_Height);
    pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, pageHeight);
  }
  
  (async () => {
    for (let i = 0; i < totalPDFPages; i++) {
      await renderPage(i);
    }
    pdf.save("Report.pdf");
    $(".html-content").hide();
  })();
});

内容的提问来源于stack exchange，提问作者Osama Amr