在 Edge 浏览器上拒绝访问 PDF bypassSecurityTrustResourceUrl

Question

当前行为

无法打开 PDF 文件，bypassSecurityTrustResourceUrl 在 Edge 浏览器上拒绝访问 PDF

预期行为

应该查看 PDF 文件

用说明最小化重现问题

这一行产生了问题

<object  [data]="pdfURL | safeUrl" > </object>

这条线工作正常 如果 PDF URL 已经写在 html 中，它就可以工作

<object  data="https://pdfobject.com/pdf/sample-3pp.pdf" > </object>

这是 safeUrl 管道

@Pipe({ name: 'safeUrl'})
export class SafeUrlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustResourceUrl(value);
  }
}

环境

Angular CLI: 6.1.1
Node: 8.11.3
OS: win32 x64
Angular: 4.4.7
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped


Browser:
- [x ] Edge version Default

For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  Windows 

Answer 1

根据PDF Viewer using object tag not working for Edge

我们需要使用 DOM elementRef 设置数据属性。

模板：

<object [data]="pdfurl | safeUrl" #pdfobject></object>

组件：

@ViewChild('pdfobject') pdfobject: ElementRef;
this.pdfobject.nativeElement.setAttribute('data', 'https://pdfobject.com/pdf/sample-3pp.pdf');