HTML2PDF.js转换输出空白PDF无报错，求排查方法及替代方案

• 验证底层依赖渲染能力：html2pdf.js 底层依赖 html2canvas 实现DOM转画布逻辑，先单独测试html2canvas能否正常渲染目标元素，判断问题是否出在渲染环节：
  测试代码如下：

  // 单独测试html2canvas渲染结果
  html2canvas(document.querySelector('.pdf-container')).then(canvas => {
    // 将生成的canvas插入页面，直观判断是否渲染正常
    document.body.appendChild(canvas);
  });
  

  如果插入的canvas是空白，可直接定位是html2canvas的适配问题。
• 检查DOM样式兼容性：html2canvas对部分CSS特性支持有限，常见的导致空白的样式包括：fixed固定定位、transform变换、CSS滤镜、overflow裁剪属性、z-index层级异常、透明度为0等。可以临时给目标容器加醒目的边框样式，确认转换的是正确DOM节点，再逐一注释可疑样式验证。
• 补充完善配置参数：默认配置可能无法适配当前页面场景，可添加显式配置项调整转换规则：
  调整后的调用代码参考：

  jQuery('.js-download-itinerary-file').on('click', function(e){
    e.preventDefault();
    var element = jQuery('.pdf-container');
    var opt = {
          filename: 'download.pdf',
          scale: 2, // 适配高清屏，避免内容模糊/空白
          useCORS: true, // 允许加载跨域图片资源
          logging: true, // 开启日志输出，便于排查隐藏问题
          margin: 10, // 避免内容被页边距裁剪
          html2canvas: { useCORS: true, scale: 2 },
          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };
    html2pdf().set(opt).from(element[0]).save();
  });
  

• 确认资源加载状态：如果目标容器内包含图片、iframe、懒加载内容等异步资源，需要等待所有资源加载完成后再触发转换，避免资源未加载导致的空白，可以给转换逻辑加适当延迟，或者监听资源的load事件后再执行转换。

• 原生jsPDF+html2canvas组合：脱离html2pdf.js的封装层，手动调用两个底层库实现转换，可控性更高，可针对业务场景做定制化适配。
• Puppeteer：服务端转换方案，调用Chrome内核生成PDF，渲染效果和浏览器实际显示几乎完全一致，稳定性远高于前端转换方案，适合对PDF格式、还原度要求高的业务场景。
• Print.js：如果允许用户调用浏览器自带打印功能另存为PDF，Print.js可定制打印区域，效果贴近原生渲染，兼容性更好，适配成本更低。

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