Wicked PDF生成PDF时JavaScript无法加载执行问题咨询

Hey, let's work through why your JavaScript isn't running properly with Wicked PDF—this is a common pain point, but we can break it down step by step:

1. 先确保Wicked PDF启用了JavaScript执行 #

Wicked PDF relies on wkhtmltopdf under the hood, and JS execution isn't always enabled by default. Update your backend code to explicitly turn it on, plus add safeguards to wait for your JS to finish running:

pdf = render_to_string pdf: 'artproof', 
                       template: '/uniforms/...',
                       javascript: true,
                       delay: 2000, # 给JS留2秒执行时间（可按需调整）
                       window_status: 'js_complete' # 配合前端标记执行完成

Then update your frontend JS to signal when it's done:

$(function() {
  Utils.loadSummaryFonts();
  Colors.loadColorsOnSvgsOnSummary();
  window.status = 'js_complete'; // Tell wkhtmltopdf we're ready to render
});

2. Verify jQuery is loaded before your custom JS #

Your code uses $(function()), so jQuery needs to be loaded first. Make sure it's included in your template before your script block. For Rails projects, use the asset pipeline to avoid path issues:

<%= javascript_include_tag 'jquery' %>
<script type="text/javascript" charset="utf-8">
  $(function() {
    Utils.loadSummaryFonts();
    Colors.loadColorsOnSvgsOnSummary();
  });
</script>

3. Check if Utils and Colors objects are available #

Sometimes JS fails because the dependent objects aren't loaded correctly. Add quick debug checks to confirm they exist:

$(function() {
  // Debug checks
  console.log('Utils exists:', typeof Utils !== 'undefined');
  console.log('Colors exists:', typeof Colors !== 'undefined');

  // Only run if dependencies are present
  if (typeof Utils !== 'undefined' && typeof Colors !== 'undefined') {
    Utils.loadSummaryFonts();
    Colors.loadColorsOnSvgsOnSummary();
  }
});

To see wkhtmltopdf's JS console output, add debug: true to your backend PDF config—it'll show you any errors like missing objects.

4. Test with static HTML first #

Render your template as a regular HTML page and open it in a browser. If the JS doesn't work here either, fix the frontend issues first (like broken dependency paths, syntax errors) before troubleshooting Wicked PDF. If it works in the browser but not in PDF, the problem is definitely in the wkhtmltopdf/Wicked PDF configuration.

5. Handle font loading carefully #

If Utils.loadSummaryFonts() loads custom fonts, wkhtmltopdf has strict rules for font paths:

• Use absolute paths (e.g., /assets/fonts/your-font.ttf) instead of relative ones
• Consider defining fonts directly in CSS with @font-face instead of JS—it's more reliable for PDF rendering:

@font-face {
  font-family: 'CustomFont';
  src: url('/assets/fonts/custom-font.ttf') format('truetype');
}

6. Check wkhtmltopdf version compatibility #

Older versions of wkhtmltopdf have poor JS support (especially for modern syntax or DOM operations). Upgrade to the latest stable version, and make sure your Wicked PDF gem version is compatible with it.

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