wkhtmltopdf 0.12.5是否支持执行JS代码？生成空白PDF如何解决

wkhtmltopdf 0.12.5 本身支持执行JavaScript代码，但它内置的渲染内核是老旧版本QtWebKit，仅完整支持ES5及更早的语法标准，对ES6+特性的兼容性极差，这是你当前输出空白PDF的核心原因。

现有代码的核心问题 #

你之前只把变量声明改成var不足以解决兼容性问题，代码里还有两个老内核完全无法识别的ES6语法，只要出现这类语法，整个脚本会直接报错，且老版QtWebKit脚本容错性极低，很容易直接打断整个页面的渲染流程，最终输出空白PDF：

• 扩展运算符...
• 箭头函数() => {}

适配0.12.5版本的兼容JS代码 #

把原有脚本替换为以下纯ES5写法的版本即可正常运行：

<script>
  var rowWrappArr = Array.prototype.slice.call(document.querySelectorAll(".block__row-wrapp"));
  rowWrappArr.forEach(function(currentRow, index) {
    var currentRowWrappHeight = rowWrappArr[index].offsetHeight;
    var currentRowElemsArr = Array.prototype.slice.call(currentRow.children);
    currentRowElemsArr.forEach(function(currentRowChild) {
      var currentRowChildElem = Array.prototype.slice.call(currentRowChild.children)[0];
      if (currentRowChildElem && currentRowChildElem.style) {
        currentRowChildElem.style.height = currentRowWrappHeight + "px";
      }
    });
  });
  // 脚本执行完成后标记状态，配合命令行参数使用
  window.status = "ready";
</script>

注意脚本要放在HTML文件的</body>闭合标签之前，不要放在<head>区域，避免DOM未加载完成时脚本执行拿不到元素。

分步排查方案 #

按以下顺序操作可以快速定位解决问题：

• 调试阶段先给命令加上--debug-javascript参数，转换过程中控制台会直接打印JS运行的报错信息，无需盲目猜测问题点
• 加上--no-stop-slow-scripts参数，避免内核误判定脚本运行超时直接终止执行
• 不要只用固定的--javascript-delay等待脚本执行，配合上面JS里加的window.status = "ready"标记，给命令加上--window-status ready参数，程序会自动等你的DOM操作逻辑全部执行完成后再开始渲染PDF，不会出现等待时长不足或者浪费等待时间的问题
• 验证JS运行环境是否正常时，可以在脚本第一行加document.body.style.backgroundColor = "#f00";，如果转出的PDF页面是红色，说明JS执行通道正常，否则就是脚本仍有语法错误
• 最后检查传入的HTML文件路径是否正确，路径错误加载不到源文件也会输出空白PDF

调整后可直接使用的转换命令 #

wkhtmltopdf ../../test.html --enable-javascript --no-stop-slow-scripts --window-status ready --debug-javascript test.pdf

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