RAILS中使用GROVER从HTML生成PDF时CSS样式未加载的问题咨询

问题根因 #

你直接传入渲染后的HTML字符串给Grover时，Grover底层调用的Puppeteer无法解析HTML中相对路径的静态资源（CSS、图片、字体等），同时默认使用print媒体类型渲染，会忽略针对screen的媒体查询样式，最终导致样式丢失。

修复方案 #

方案1：添加页面上下文地址（最常用） #

调用Grover.new时传入display_url参数，指定你应用的根地址，让Puppeteer可以正常解析相对路径的资源：

# 替换你原来的Grover实例化代码
pdf = Grover.new(html_string, format: 'A4', display_url: root_url).to_pdf

方案2：配置Grover模拟屏幕媒体类型 #

如果你的样式是针对屏幕端编写，用了@media screen限制，可在全局配置中指定Grover模拟屏幕媒体类型渲染。
在config/initializers/grover.rb中添加如下配置：

Grover.configure do |config|
  config.options = {
    format: 'A4',
    prefer_css_page_size: true,
    # 强制使用screen媒体类型，不会触发打印样式适配
    emulate_media: 'screen',
    # 若生产环境资源有访问权限限制，可加上以下配置跳过权限校验
    # launch_args: ['--no-sandbox', '--disable-setuid-sandbox']
  }
end

方案3：CSS内联（兼容性最高） #

如果前两种方案不生效，可以直接把所需的CSS内容内联到渲染后的HTML头部，彻底避免资源加载问题：

html_string = render_to_string(
  template: 'users/show.html.erb',
  locals: { id: params[:id] }
)
# 读取编译后的CSS文件内容，注意替换为你实际的样式文件路径
css_content = File.read(Rails.root.join('public', 'assets', 'application.css'))
# 把样式插入到HTML的head标签末尾
html_string = html_string.gsub('</head>', "<style>#{css_content}</style></head>")

pdf = Grover.new(html_string, format: 'A4').to_pdf

注意事项 #

• 生产环境使用前需确认静态资源已完成预编译，资源路径可正常访问
• 若使用CDN托管静态资源，需确保display_url对应的域名和CDN资源域名没有跨域访问限制
• 不要使用JS动态注入的样式，Puppeteer默认不会等待异步JS执行完成，动态样式会丢失

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