如何在Chrome默认PDF viewer的iframe中隐藏/禁用下载按钮且保留工具栏

以下是几种可行的实现方式，各有适用场景：

方案1：利用Chrome内置URL参数（推荐，Chrome专属） #

Chrome 88及以上版本的默认PDF查看器支持disableDownload参数，可直接通过修改iframe的PDF链接参数来禁用下载按钮，同时保留工具栏：

<iframe src="your-document.pdf#toolbar=1&disableDownload=true" width="100%" height="600"></iframe>

• toolbar=1：强制显示完整工具栏
• disableDownload=true：隐藏并禁用下载功能
• 局限性：仅适用于Chrome浏览器，其他浏览器（如Firefox、Edge）不支持该参数。

方案2：同源下的DOM操作（需同域PDF） #

如果PDF文件与当前页面同源（同域名、协议、端口），可通过JS操作iframe内部的DOM元素来隐藏下载按钮：

const pdfIframe = document.getElementById('pdf-viewer');
pdfIframe.addEventListener('load', () => {
  // Chrome PDF查看器中下载按钮的选择器（随版本可能变化）
  const downloadBtn = pdfIframe.contentDocument.querySelector('.toolbarButton[title="下载"]');
  if (downloadBtn) {
    downloadBtn.style.display = 'none';
    // 或禁用按钮：downloadBtn.disabled = true;
  }
});

• 局限性：必须同源（跨域iframe无法访问内部DOM）；Chrome更新可能改变PDF查看器的DOM结构，导致选择器失效。

方案3：使用自定义PDF查看器（跨浏览器兼容） #

如果需要跨浏览器支持或更高的自定义度，可替换为第三方PDF查看器（如PDF.js），完全自定义工具栏：

1. 引入PDF.js库
2. 自定义工具栏布局，移除下载按钮相关代码
3. 通过PDF.js的API加载并展示PDF

这种方式完全可控，不受浏览器限制，但需要额外的开发成本来集成和定制界面。

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