使用html2pdf.js转PDF后文件空白，求排查问题

针对你用html2pdf.js在WordPress生成空白PDF的问题，从代码和WordPress环境角度排查出几个可能的原因及解决方法：

1. 元素存在性验证 #

首先确认页面中是否存在id="pdf"的按钮和id="test"的目标元素：

• 检查ID拼写是否完全一致（区分大小写）
• 如果目标元素是动态生成（比如通过AJAX加载），window.onload触发时元素还未渲染，导致element为null，此时可改用事件委托兼容动态元素：

// 替换原按钮绑定逻辑
document.addEventListener('click', function(e) {
  if (e.target.id === 'pdf') {
    var element = document.getElementById("test");
    if (!element) {
      console.error('目标元素#test不存在');
      return;
    }
    html2pdf().from(element).save('filename.pdf');
  }
});

2. WordPress脚本加载时机优化 #

你当前用template_redirect钩子输出脚本，触发时机较早，建议改用wp_footer钩子让脚本在页面底部加载，更符合DOM加载顺序：

add_action( 'wp_footer', 'pdf_to' );
function pdf_to(){
?>
<!-- 脚本内容保持不变 -->
<?php
}

同时推荐用WordPress标准方式加载外部脚本，避免直接输出：

add_action( 'wp_enqueue_scripts', 'enqueue_html2pdf' );
function enqueue_html2pdf() {
  wp_enqueue_script( 'html2pdf', 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js', array(), '0.10.1', true );
}

add_action( 'wp_footer', 'pdf_to' );
function pdf_to(){
?>
<script>
// 你的to_pdf函数逻辑
</script>
<?php
}

3. html2pdf配置补充 #

旧版本html2pdf可能需要明确配置渲染参数，避免默认设置导致渲染失败，比如添加缩放参数提升清晰度：

html2pdf().set({
  html2canvas: { scale: 2 }, // 提升渲染分辨率
  margin: 10,
  jsPDF: { format: 'a4', orientation: 'portrait' }
}).from(element).save('filename.pdf');

4. 样式与渲染排查 #

• 如果#test元素包含隐藏内容（display:none）、浮动元素或复杂CSS，html2canvas可能无法正确渲染，可尝试将内容复制到临时容器再生成：

var element = document.getElementById("test");
var tempContainer = document.createElement('div');
tempContainer.innerHTML = element.innerHTML;
tempContainer.style.width = '100%';
tempContainer.style.padding = '10px';
document.body.appendChild(tempContainer);
html2pdf().from(tempContainer).save('filename.pdf');
document.body.removeChild(tempContainer);

• 查看浏览器控制台是否有报错（比如html2pdf未定义、元素获取失败），这类错误会直接导致PDF生成失败。

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