PDF生成时Chromium不识别样式：如何让Grover/Puppeteer渲染颜色？

针对内联rgb颜色、类选择器rgba背景色在PDF中不生效但浏览器正常显示的情况，可尝试以下解决方案：

• 启用PDF背景渲染
  Chromium默认生成PDF时会忽略背景样式，Grover需要显式开启该配置：

  Grover.new(your_html_content, print_background: true).to_pdf
  

  这是背景色不生效的最常见原因，开启后rgba背景应能正常显示。

• 调整颜色值写法
  内联样式的rgb写法中的多余空格可能导致Chromium PDF引擎解析异常，可简化格式：

  <!-- 原写法 -->
  <span style='color: rgb(255, 0, 0); ' >  [...] </span>
  <!-- 修改后 -->
  <span style='color: rgb(255,0,0);'>[...] </span>
  <!-- 或替换为十六进制写法 -->
  <span style='color: #ff0000;'>[...] </span>
  

  若低透明度rgba仍不生效，可换成带透明度的十六进制值（0.07转十六进制为0f）：

  .tree_vertical_father {
    background-color: #0000ff0f;
  }
  

• 等待页面完全渲染
  若样式加载延迟导致PDF生成时未捕获到样式，可设置等待选项确保页面渲染完成：

  Grover.new(your_html_content, print_background: true, wait_for_network_idle: true).to_pdf
  

  也可指定等待DOM加载完成：

  Grover.new(your_html_content, print_background: true, wait_for: 'domcontentloaded').to_pdf
  

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