Firefox浏览器使用iframe标签展示PDF弹出下载窗口问题咨询

问题原因 #

这个现象确实和Firefox近几个版本的配置更新有关，Firefox 98及后续版本调整了PDF资源的默认处理策略，部分场景下会跳过内置预览逻辑直接触发下载询问，和Chrome默认优先内嵌预览的逻辑存在差异。

HTML层面修复方案 #

• 方案1：给现有iframe添加type属性明确指定MIME类型
  强制告知浏览器目标资源为PDF格式，触发内置预览逻辑，修改后代码如下：

  <iframe src="M3-Presentation-Slides.pdf" type="application/pdf" width="100%" height="500px"></iframe>
  

• 方案2：更换为兼容性更好的<object>标签实现PDF内嵌
  <object>标签对浏览器PDF内嵌的支持度更高，适配性优于iframe，还可以添加兜底提示，代码参考：

  <object data="M3-Presentation-Slides.pdf" type="application/pdf" width="100%" height="500px">
    <p>您的浏览器不支持PDF预览，可点击下载文件查看</p>
  </object>
  

• 方案3：双重标签嵌套实现全浏览器兼容
  同时嵌套object和iframe做多层降级兼容，覆盖绝大多数浏览器场景：

  <object data="M3-Presentation-Slides.pdf" type="application/pdf" width="100%" height="500px">
    <iframe src="M3-Presentation-Slides.pdf" type="application/pdf" width="100%" height="500px">
      <p>您的浏览器不支持PDF预览，可点击下载文件查看</p>
    </iframe>
  </object>
  

额外注意事项 #

如果修改前端代码后问题依旧存在，需要确认服务器返回PDF文件时的响应头Content-Type是否为application/pdf，响应头类型错误也会强制触发浏览器下载逻辑，这个需要在服务端配置调整。

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