求助：使用jspdf+html2canvas的addHTML生成空白PDF问题

我之前也碰到过一模一样的坑，用addHTML生成空白PDF真的挺闹心的，咱们从几个常见的排查方向来解决：

• 异步流程没处理对
  addHTML返回的是Promise，如果你没等它完成就调用save()，那PDF肯定是空白的——因为内容还没渲染进去呢！一定要确保在Promise完成后再保存。
  推荐用async/await写法，清晰又不容易错：

  async function createPDF() {
    const pdfDoc = new jsPDF();
    const targetElement = document.getElementById('your-target-div');
    
    try {
      // 等待addHTML完成渲染
      await pdfDoc.addHTML(targetElement);
      // 再保存PDF
      pdfDoc.save('result.pdf');
    } catch (error) {
      console.log('生成PDF时出错:', error);
    }
  }
  

  要是习惯用.then()也可以：

  const pdfDoc = new jsPDF();
  const targetElement = document.getElementById('your-target-div');
  
  pdfDoc.addHTML(targetElement)
    .then(() => pdfDoc.save('result.pdf'))
    .catch(err => console.error(err));
  

• 目标DOM元素不可见
  html2canvas没法捕获display: none的元素，哪怕是被其他元素完全遮挡也可能出问题。如果你的元素是为了隐藏才设的display:none，可以改成把它移到视口外：

  #your-target-div {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: visible; /* 确保可见 */
  }
  

• CSS属性不兼容
  html2canvas对一些复杂CSS属性支持不太好，比如transform、filter、某些渐变或者动画，这些都可能导致渲染失败。可以临时移除这些属性，生成后再恢复：

  const targetElement = document.getElementById('your-target-div');
  // 保存原样式
  const originalStyle = {
    transform: targetElement.style.transform,
    filter: targetElement.style.filter
  };
  // 临时移除不兼容属性
  targetElement.style.transform = 'none';
  targetElement.style.filter = 'none';
  
  pdfDoc.addHTML(targetElement)
    .then(() => {
      pdfDoc.save('result.pdf');
      // 恢复原样式
      Object.assign(targetElement.style, originalStyle);
    });
  

• 元素尺寸超出PDF页面
  如果你的div宽度比PDF页面宽太多，内容可能被截断或者直接不显示。可以缩放元素适配PDF宽度：

  const pdfDoc = new jsPDF('p', 'mm', 'a4');
  const pageWidth = pdfDoc.internal.pageSize.getWidth();
  const targetElement = document.getElementById('your-target-div');
  const scaleRatio = pageWidth / targetElement.offsetWidth;
  
  await pdfDoc.addHTML(targetElement, { scale: scaleRatio });
  pdfDoc.save('result.pdf');
  

• 版本兼容性问题
  旧版本的jsPDF和html2canvas可能存在兼容bug，建议升级到最新的稳定版，很多奇怪的空白问题都是版本不匹配导致的。

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