使用html2canvas与jsPDF生成空白PDF问题排查求助

嘿，我之前也踩过类似的坑，用jsPDF+html2canvas生成空白PDF的问题大多集中在这几个点，咱们一步步排查：

1. 先解决html2canvas的版本兼容问题 #

旧版html2canvas用onrendered回调，但新版已经彻底废弃了这个API，改用Promise语法。如果你的库是新版本，那onrendered里的代码根本不会执行，自然生成空白PDF。

修复方法：把回调改成Promise写法：

$(document).ready(function() {
  function generatePDF() {
    window.scrollTo(0, 0);
    var pdf = new jsPDF('p', 'pt', [1380, 2030]);
    
    html2canvas($(".page-section")[0])
      .then(function(canvas) {
        document.body.appendChild(canvas); // 先确认canvas是否正常生成（可以在页面上看到）
        var imgData = canvas.toDataURL('image/png');
        // 把canvas内容绘制到PDF中，尺寸要和PDF设置的一致
        pdf.addImage(imgData, 'PNG', 0, 0, 1380, 2030);
        pdf.save('invoice.pdf');
      })
      .catch(function(err) {
        console.error('html2canvas渲染失败:', err); // 打印错误信息快速定位
      });
  }
});

2. 确认目标元素是否被正确选中 #

打开浏览器控制台，输入$(".page-section")[0]，看看返回的是不是你要生成发票的元素：

• 如果返回undefined，说明选择器写错了，或者元素是动态生成的（比如通过AJAX加载），需要等元素完全渲染后再调用generatePDF。
• 可以给目标元素加个唯一ID，比如id="invoice-page"，用$("#invoice-page")[0]来选择，更不容易出错。

3. 检查元素的CSS样式是否影响渲染 #

html2canvas对某些CSS属性支持不好，会导致渲染失败：

• 去掉元素的display: none、visibility: hidden，如果要隐藏元素可以用position: absolute; left: -9999px替代。
• 避免使用transform、filter这类可能导致渲染异常的属性，必要时临时移除再渲染。
• 检查元素的overflow属性，如果是hidden可能会截断内容，试试改成visible。

4. 确保canvas与PDF尺寸匹配 #

你设置的PDF尺寸是[1380, 2030]，但canvas的实际尺寸可能和这个不匹配，导致绘制到PDF里看不到内容。可以在回调里打印canvas尺寸验证：

console.log('canvas宽高:', canvas.width, canvas.height);

如果尺寸不对，可以在html2canvas里设置参数调整：

html2canvas($(".page-section")[0], {
  scale: 2, // 提高分辨率，避免PDF模糊，同时保证尺寸匹配
  width: 1380,
  height: 2030
})

5. 检查imgData是否有效 #

如果canvas.toDataURL('image/png')返回的是空或者无效的base64字符串，PDF肯定是空白的。可以在控制台打印imgData，看看是不是以data:image/png;base64,开头的有效字符串。
另外，你原来的代码里var imgData = ca...明显没写完，这也是直接导致空白的原因，一定要补全成canvas.toDataURL('image/png')。

最后调试技巧 #

先把生成的canvas添加到页面上（就是代码里的document.body.appendChild(canvas)），如果canvas是空白的，问题出在html2canvas的渲染；如果canvas有内容但PDF空白，问题就出在jsPDF的绘制步骤。

内容的提问来源于stack exchange，提问作者Paweł Sikora