Rails 5中使用wkhtmltopdf渲染svg.js生成的SVG到PDF无显示排查

看起来你遇到的核心问题是wkhtmltopdf的JS执行环境和普通浏览器存在差异，导致你的SVG绘制代码没被正确执行。下面是一步步的排查和解决方案：

1. 确认wkhtmltopdf的JS执行配置 #

默认情况下，wicked_pdf可能没有给JS足够的执行时间，或者未正确开启JS支持。你需要在Rails初始化配置里调整参数：

在config/initializers/wicked_pdf.rb中添加（如果没有这个文件就新建）：

WickedPdf.config = {
  enable_javascript: true, # 确保JS执行功能开启
  js_delay: 1500, # 等待1.5秒让JS完成渲染，可根据SVG复杂度调整时长
  # 可选：用window.status精确控制等待时机（更可靠）
  window_status: 'svg-ready'
}

如果使用window_status配置，需要在SVG绘制完成后手动设置状态：

// 在svg_graph.initialize函数的最后添加
window.status = 'svg-ready';

2. 确保JS执行时机正确 #

虽然你的inline script写在目标div之后，但wkhtmltopdf的DOM解析顺序可能和浏览器不同。建议修改代码，等待DOM完全就绪且svg.js加载完成后再执行初始化：

修改svg_graph.html.erb中的script部分：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 轮询检查svg.js是否加载完成（CDN资源可能存在延迟）
  const checkSvgLoaded = setInterval(() => {
    if (typeof SVG !== 'undefined') {
      clearInterval(checkSvgLoaded);
      // 执行SVG初始化
      svg_graph.initialize(document.getElementById("svg-graph-" + <%= location_id %>), <%= location_id %>);
      // 若配置了window_status，记得设置状态
      window.status = 'svg-ready';
    }
  }, 100);
});
</script>

3. 避免依赖外部CDN资源 #

wkhtmltopdf对外部CDN资源的加载可能存在延迟或访问限制，建议把svg.js下载到本地assets目录：

1. 下载svg.min.js到app/assets/javascripts/
2. 修改show.pdf.erb中的JS引入：

<%= wicked_pdf_javascript_include_tag "svg.min" %>
<%= wicked_pdf_javascript_include_tag "svg_graph" %>

4. 检查JS兼容性问题 #

wkhtmltopdf基于较旧的WebKit内核，如果你在svg_graph.js中使用了ES6+语法（比如箭头函数、let/const、解构赋值等），可能会导致执行失败。建议：

• 将代码转成ES5语法
• 或用Babel编译JS文件（如果项目已配置Webpacker或Asset Pipeline的Babel支持）

5. 调试方法定位问题 #

如果以上方法都无效，可以生成中间HTML文件排查：
在控制器的render方法中添加调试选项：

def show
  respond_to do |format|
    format.pdf do
      render pdf: 'show',
             debug: true,
             save_to_file: Rails.root.join('tmp', 'debug_pdf.html')
    end
  end
end

打开tmp/debug_pdf.html，在浏览器中运行并打开开发者工具，查看Console面板的JS错误信息，就能精准定位执行问题。

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