iFrame嵌入PDF保留工具栏仅隐藏下载按钮及火狐兼容方案

你搜到的<iframe src="URL#toolbar=0"></iframe>写法调用的是浏览器内置PDF阅读器的全局工具栏开关，没有提供单独隐藏下载按钮的原生参数，开启后会直接隐藏整个工具栏，不符合需求。以下两种方案都可以实现纯UI层面的按钮隐藏，同时适配火狐浏览器，不需要用户手动修改浏览器配置：

方案1：CSS偏移遮罩（零依赖、实现成本最低） #

这个方案不需要修改PDF文件、不需要引入第三方库，全主流浏览器兼容：

• 核心逻辑：给iframe套一层设置了overflow: hidden的相对定位容器，将iframe整体向上偏移固定像素，把工具栏最右侧的下载按钮区域顶到容器可视范围外，其余翻页、缩放、旋转、打印等工具栏按钮会完整保留显示。
• 偏移值参考：不同浏览器内置PDF阅读器的工具栏高度差极小，通用偏移值设为32px-36px即可，你可以根据实际展示效果微调。
• 实现代码：

<!-- 外层容器按业务需求设置宽高即可 -->
<div style="position: relative; width: 100%; height: 900px; overflow: hidden;">
  <iframe 
    src="替换为你的PDF访问地址"
    style="position: absolute; top: -34px; left: 0; width: 100%; height: calc(100% + 34px);"
    frameborder="0"
  ></iframe>
</div>

该方案仅做前端视觉层面的隐藏，无法从技术层面彻底阻止用户通过其他路径下载PDF，符合你提到的UI调整需求。

方案2：基于PDF.js自定义阅读器（控制精度最高、兼容性最优） #

如果CSS偏移方案在个别浏览器版本下出现按钮遮挡不全的问题，可以直接使用PDF.js搭建自定义阅读页：

• 该方案不依赖浏览器自带的PDF渲染引擎，完全由前端拉取PDF资源后渲染，不会出现火狐下iframe加载PDF异常的问题。
• 实现时只需要在PDF.js默认阅读器的初始化逻辑中，找到下载按钮对应的DOM节点，设置display: none即可，其余工具栏功能可以完整保留，不需要修改库的核心源码。

火狐兼容注意事项 #

如果火狐下出现iframe嵌入PDF加载失败的问题，本质是跨域资源的安全限制导致的：

• 使用CSS遮罩方案时，将PDF资源部署在和业务站点同域下，或者给PDF资源配置正确的CORS响应头即可正常加载，不需要用户调整任何配置。
• 使用PDF.js方案时不存在该限制，只要资源可以正常被前端请求拉取即可正常渲染。

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