Ruby中Wicked PDF渲染CSS/JS异常：HTML页面样式与JS未显示

Hey there! Let's figure out why your Wicked PDF conversion isn't displaying your HTML, CSS, and JavaScript correctly. I'll walk through the most common issues and fixes based on the setup you mentioned (controller code, ERB view, Gemfile):

1. Verify Gemfile Configuration #

First, make sure your gems are set up correctly and compatible:

# Gemfile
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary' # Use wkhtmltopdf-binary-edge for newer Chromium-based builds if needed

• For Linux servers, you’ll need to install system dependencies like libxrender1, libfontconfig, and libxtst6 via your package manager (e.g., apt-get install on Debian/Ubuntu).
• Avoid mixing conflicting versions of wicked_pdf and wkhtmltopdf-binary—stick to the latest stable releases for best compatibility.

2. Fix Controller Render Settings #

Your controller’s PDF render block is critical. Common mistakes here break rendering:

Example Working Controller Code: #

def rapport_load_pdf
  respond_to do |format|
    format.pdf do
      render pdf: "rapport_load", # Output PDF filename
             template: "your_controller/rapport_load_pdf", # Explicitly specify the template path (replace with your actual controller name)
             layout: "pdf", # Use a minimal PDF-specific layout (avoid your app's default application layout with unloaded CDN resources)
             encoding: "UTF-8",
             javascript_delay: 1000, # Give JS time to execute (adjust based on your content)
             window_status: "ready", # Wait for JS to set window.status = "ready" before rendering
             debug: true # Enable this temporarily to see raw wkhtmltopdf commands and errors
    end
  end
end

Key Fixes: #

• Explicit template path: If Wicked PDF can’t find your ERB file, it’ll render a blank PDF. Double-check the controller/template name matches your file structure.
• Minimal PDF layout: Your default application.html.erb likely includes CDN-hosted CSS/JS that Wicked PDF can’t fetch. Create a pdf.html.erb layout with only essential styles/scripts.
• JS delay/window status: Dynamic JS content needs time to load. Use javascript_delay for simple cases, or window_status for precise control (add window.status = "ready"; at the end of your view’s JS).

3. Fix ERB View (rapport_load_pdf.html.erb) Issues #

Wicked PDF renders locally, so relative paths and external resources often fail:

CSS Fixes: #

• Inline CSS or use absolute paths: Avoid stylesheet_link_tag for external or relative files. Either inline your CSS directly in a <style> tag, or use an absolute filesystem path:

  <!-- Bad: Relative path won't work -->
  <%= stylesheet_link_tag 'application.css' %>
  
  <!-- Good: Absolute filesystem path -->
  <%= stylesheet_link_tag Rails.root.join('public', 'stylesheets', 'application.css').to_s %>
  
  <!-- Even better: Inline critical CSS -->
  <style>
    .report-table { border-collapse: collapse; width: 100%; }
    .report-table th { background: #eee; padding: 8px; }
  </style>
  

HTML/JS Fixes: #

• Avoid modern JS frameworks: Wkhtmltopdf’s JS engine is outdated—if you’re using React/Vue, consider server-side rendering or converting dynamic content to static HTML before PDF generation.
• Absolute image paths: Use filesystem paths or data URIs for images:

  <%= image_tag Rails.root.join('public', 'images', 'logo.png').to_s, alt: "Logo" %>
  

• Simplify JS: Replace ES6+ syntax (arrow functions, let/const) with ES5-compatible code, since wkhtmltopdf doesn’t support modern JS features well.

4. Debugging Tips #

• Test the HTML first: Visit the HTML version of your view (e.g., http://localhost:3000/your_controller/rapport_load_pdf.html) to confirm it renders correctly in a browser. If it’s broken there, the PDF will be too.
• Check wkhtmltopdf errors: Enable debug: true in your controller render block—this will generate a temporary HTML file and print the full wkhtmltopdf command to your console. Run the command manually to see specific errors.
• Update wkhtmltopdf: Run wkhtmltopdf --version—aim for version 0.12.6 or newer. Older versions have severe CSS/JS rendering bugs.

内容的提问来源于stack exchange，提问作者Damien Compère