如何通过Html2Canvas/PDF避免子Div在PDF导出时被切割？

问题背景 #

需要实现按钮导出HTML为PDF，但当前用Html2Canvas+jsPDF的方案会把容器转成单一Canvas后切割，导致子Div被分页截断，还会生成空白页；试过ReactPDF，但因项目中嵌套Div过多，需要额外添加大量标签，实用性差。

解决方案 #

核心思路是逐个处理需要保持完整的区块，而非将整个容器转成一张大Canvas后切割。具体步骤如下：

• 给所有不能被切割的子Div添加统一类名（比如no-break-section），方便后续遍历
• 遍历这些区块，逐个用html2canvas转换为Canvas
• 计算每个区块在PDF中的显示高度，判断当前页剩余空间是否足够容纳，不足则先新增页面
• 将每个区块的Canvas添加到PDF对应位置

修改后的代码实现 #

const saveAsPDF = async () => {
  const container = document.getElementById("container-to-print");
  if (!container) return;

  // 获取所有需要保持完整的区块
  const sections = container.querySelectorAll(".no-break-section");
  if (sections.length === 0) return;

  const pdf = new jsPDF('p', 'mm', 'a4'); // 纵向、毫米单位、A4纸
  const pageWidth = pdf.internal.pageSize.getWidth();
  const pageHeight = pdf.internal.pageSize.getHeight();
  let currentY = 10; // 页面顶部留白10mm

  // 遍历每个区块
  for (const section of sections) {
    // 转换当前区块为Canvas
    const canvas = await html2canvas(section, {
      scale: 2, // 提高分辨率，避免模糊
      useCORS: true
    });

    // 计算Canvas在PDF中的尺寸（等比例缩放，宽度适配页面宽度）
    const imgWidth = pageWidth - 20; // 左右各留10mm边距
    const scaleRatio = imgWidth / canvas.width;
    const imgHeight = canvas.height * scaleRatio;

    // 判断当前页剩余空间是否足够放下这个区块
    if (currentY + imgHeight > pageHeight - 10) { // 底部留10mm边距
      pdf.addPage();
      currentY = 10; // 新页面重置顶部位置
    }

    // 将Canvas添加到PDF
    const imgData = canvas.toDataURL("image/png");
    pdf.addImage(imgData, "PNG", 10, currentY, imgWidth, imgHeight);

    // 更新当前页的Y坐标
    currentY += imgHeight + 5; // 区块之间留5mm间距
  }

  pdf.save("download.pdf");
};

关键细节说明 #

• 区块标记：给需要完整展示的Div加no-break-section类，确保这些区块不会被截断
• 分页判断：每次添加区块前计算剩余空间，不足则新增页面，保证区块完整
• 分辨率优化：设置scale:2提升Canvas清晰度，避免PDF导出后模糊
• 边距控制：给页面添加上下左右边距，让PDF排版更美观
• 避免空白页：逐个添加区块的方式不会出现原方案中因整体Canvas切割导致的空白页问题

额外优化建议 #

• 如果区块内有动态内容（比如图片懒加载），需要确保内容加载完成后再执行导出
• 可以给容器添加打印样式，隐藏不需要导出的元素：

@media print {
  .container-to-print {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
  }
  .non-printable {
    display: none;
  }
}

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