如何移除iframe PDF预览器的黑色背景或设置为白色？

问题场景 #

用iframe标签实现PDF预览功能，桌面端浏览器中PDF预览背景显示为黑色，移动端无此问题。

现有代码 #

<iframe src="/loadsheet/LOADSHEET_LX-AIM [PA-44-180]_27_04_2024_00_56.pdf#toolbar=0" frameborder="0" id="metricImage" style="height: 35vh"></iframe>

问题截图 #

解决方法 #

• URL参数强制设置背景色
  给PDF地址追加bgcolor=ffffff参数指定背景为白色，搭配view=FitH优化显示效果：

  <iframe src="/loadsheet/LOADSHEET_LX-AIM [PA-44-180]_27_04_2024_00_56.pdf#toolbar=0&view=FitH&bgcolor=ffffff" frameborder="0" id="metricImage" style="height: 35vh"></iframe>
  

• 给iframe添加白色背景样式
  直接为iframe设置白色背景，覆盖浏览器PDF查看器的深色默认值：

  <iframe src="/loadsheet/LOADSHEET_LX-AIM [PA-44-180]_27_04_2024_00_56.pdf#toolbar=0" frameborder="0" id="metricImage" style="height: 35vh; background-color: white;"></iframe>
  

• 适配浏览器深色模式
  如果是浏览器深色模式导致的背景变黑，可通过CSS反转颜色适配：

  @media (prefers-color-scheme: dark) {
    #metricImage {
      filter: invert(1) hue-rotate(180deg);
    }
  }
  

  该方法会反转PDF整体颜色，适合浅色内容的PDF，避免深色模式下背景异常。

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