Angular 8中隐藏iframe内PDF工具栏的方法求助

这种情况我之前踩过坑！用#toolbar=0没生效，大概率是因为你没把参数正确附加到Blob URL上，或者浏览器PDF查看器的特性导致的。给你几个亲测有效的方案：

方案1：正确附加PDF查看器参数到Blob URL #

你之前的代码里，可能只是生成了Blob URL但没把参数拼进去。试试在创建Object URL后直接拼接PDF查看器的控制参数，再传给sanitizer：

loadPdf() {
  this.myService
    .downloadMyPdf(sessionStorage.getItem('selectedTemplateId'), this.dataShareService.getmyData())
    .subscribe( (res) => {
      const blobUrl = window.URL.createObjectURL(res);
      // 拼接控制参数，隐藏工具栏、导航面板等
      const pdfUrlWithParams = `${blobUrl}#toolbar=0&navpanes=0&scrollbar=0`;
      this.dataLocalUrl = this.sanitizer.bypassSecurityTrustResourceUrl(pdfUrlWithParams);
    }, )
}

这里的参数作用：

• toolbar=0：隐藏顶部包含打印、下载按钮的工具栏
• navpanes=0：隐藏左侧的书签、缩略图导航面板
• scrollbar=0：隐藏PDF的滚动条（可选）

注意：Chrome和Edge的内置PDF查看器完全支持这些参数，但Firefox的处理方式略有不同，可能需要用户调整浏览器设置。

方案2：用CSS裁剪隐藏工具栏（视觉上隐藏） #

如果URL参数在某些浏览器不生效，可以通过CSS容器裁剪的方式，把顶部工具栏隐藏掉。因为同源策略限制，我们没法直接操作iframe内部的DOM，但可以用容器的overflow:hidden来裁剪：

<div style="width: 100%; height: 80%; overflow: hidden; position: relative;">
  <iframe 
    name="iframe1" 
    id="iframe1" 
    [attr.src]="dataLocalUrl" 
    width="100%" 
    height="calc(100% + 60px)" 
    style="position: absolute; top: -60px;"
    type="application/pdf">
    content...
  </iframe>
</div>

思路是把iframe向上偏移60px（适配Chrome工具栏的大致高度），然后用容器把顶部的工具栏部分裁剪掉。缺点是不同浏览器工具栏高度可能不一样，需要微调偏移值，而且用户还是能通过右键菜单操作，但视觉上完全隐藏了工具栏。

方案3：用sandbox属性限制权限（禁用下载/打印） #

如果你的核心需求是禁用打印和下载功能，而不只是隐藏工具栏，可以给iframe添加sandbox属性，限制它的权限：

<iframe 
  name="iframe1" 
  id="iframe1" 
  [attr.src]="dataLocalUrl" 
  width="100%" 
  height="80%" 
  type="application/pdf"
  sandbox="allow-same-origin allow-scripts">
  content...
</iframe>

sandbox的参数说明：

• allow-same-origin：必须添加，否则iframe无法加载你的Blob URL
• allow-scripts：允许PDF查看器运行必要的脚本，保证正常渲染

添加这个属性后，PDF查看器右键菜单里的打印、下载选项会被禁用，配合方案1的URL参数使用，能同时隐藏工具栏和禁用操作。

方案4：用PDF.js完全自定义渲染（最可控） #

如果上面的方法都达不到你的要求，最彻底的方式是用PDF.js库来渲染PDF。这样你可以完全自定义UI，想隐藏什么就隐藏什么，甚至自己实现工具栏。不过这个方案需要额外引入库，修改代码逻辑，适合对PDF展示有高度定制需求的场景。

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