生产环境下使用Grover gem生成PDF时CSS加载失败的解决求助

本地使用Grover Gem从HTML模板生成PDF时样式正常，但生产环境（AWS CloudFront作为CDN）下生成的PDF缺失UI样式，可从以下几个方向排查解决：

1. 修正CSS资源引用路径 #

Grover基于Chromium渲染HTML，生产环境若使用相对路径引用CSS，Chromium可能无法正确定位CDN上的资源。可通过两种方式处理：

• 内联CSS样式：将CSS直接嵌入HTML模板的<style>标签中，或使用premailer-rails这类工具自动把外部样式内联到HTML里，彻底消除对外部资源的依赖。
• 配置base_url：在渲染HTML时指定CDN作为资源主机，确保Grover能解析绝对路径。修改渲染代码：

file_content = action_controller.render_to_string(
  template: 'performance/reviews/combine_print',
  layout: 'pdf_layout',
  formats: [:html],
  locals: { data: @data, current_state:, participants:, current_user: current_state.user,
            current_company: current_state.company },
  assigns: { permissions:, make_anonymous: },
  base_url: Rails.application.config.action_controller.asset_host
)

同时在生产环境配置文件中设置config.action_controller.asset_host = "https://your-cloudfront-domain.com"（替换为你的CloudFront域名）。

2. 调整Grover渲染配置 #

Grover默认可能未等待所有资源加载完成就生成PDF，导致样式丢失。修改Grover初始化代码，添加资源加载相关配置：

grover = Grover.new(file_export.data, 
  format: 'A4',
  wait_for_network_idle: true, # 等待网络空闲后再生成PDF
  timeout: 10000, # 延长超时时间，确保CDN资源加载完成
  base_url: Rails.application.config.action_controller.asset_host
)

3. 检查CloudFront配置 #

• 确认CloudFront未拦截Grover的请求：检查WAF规则、IP限制等，确保服务器能正常请求CDN上的CSS资源。
• 验证CSS文件的Content-Type：确保CloudFront返回的CSS文件Content-Type为text/css，避免Chromium无法识别样式。
• 调整缓存策略：若CSS资源缓存过久，可能导致Grover加载到旧的或缺失的样式，可适当调整缓存TTL或添加缓存失效机制。

4. 调试生产环境HTML内容 #

将生产环境渲染后的HTML内容输出到日志，检查CSS引用路径是否正确：

Rails.logger.info "Rendered HTML for PDF: #{file_content}"

复制日志中的CSS URL到浏览器，确认能正常加载样式文件，以此排查路径或资源可用性问题。

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