使用JSPDF .html方法生成PDF时页面空白问题求助

核心问题分析 #

你遇到的全空白问题，本质是**doc.html()是异步方法**，同步循环调用后直接执行doc.save()时，所有页面的渲染操作还未完成，最终导出的是未填充内容的空白PDF。此外，配置参数的不合理设置也可能加剧渲染异常。

解决方案 #

以下是针对问题的修复步骤和优化代码：

1. 改用异步处理流程

将生成函数改为async函数，通过await等待每一页的渲染完成，确保所有内容都被填充后再导出PDF。

2. 优化页面创建逻辑

new jsPDF()默认会创建一页空白初始页，循环时需避免重复添加页面，防止导出的PDF开头出现空白页。

3. 调整渲染参数

修正html2canvas的缩放比例（过小的scale会导致内容渲染失败），移除不必要的windowWidth配置，保证参数与PDF尺寸匹配。

修复后的代码 #

async function generatePDF() {
  // 初始化PDF实例，单位mm，自定义尺寸210x200
  const doc = new jsPDF({
    unit: 'mm',
    format: [210, 200],
    orientation: 'portrait'
  });

  const renderOptions = {
    html2canvas: {
      scale: 2, // 提高缩放比例保证清晰度，0.2过小易导致渲染异常
      useCORS: true // 页面包含跨域图片时必须开启
    },
    x: 0,
    y: 0,
    width: 210 // 与PDF宽度保持一致
  };

  // 获取所有页面容器元素
  const pageElements = document.querySelectorAll('div[id^="page-"]');
  
  for (let i = 0; i < pageElements.length; i++) {
    const currentPage = pageElements[i];
    // 第一页无需新增，后续页面添加新页
    if (i > 0) {
      doc.addPage();
    }
    // 等待当前页面渲染完成
    await doc.html(currentPage, renderOptions);
  }

  // 导出PDF
  doc.save('my-pdf');
}

额外注意事项 #

• 确保页面容器（#page-*）在调用generatePDF()时已完全渲染：比如将触发逻辑放在DOMContentLoaded事件中，或等待所有动态内容加载完成后执行。
• 检查浏览器控制台报错：若存在跨域图片加载失败、元素无法捕获等错误，需对应修复（如开启useCORS、调整元素可见性）。
• 避免隐藏元素：html2canvas无法捕获display: none或visibility: hidden的元素，如需隐藏可改用position: absolute; left: -9999px等方式。
• 版本兼容：当前使用的jsPDF 2.5.1与html2canvas 1.4.1兼容，若仍有问题可尝试升级至最新稳定版。

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