拒绝在Edge浏览器上访问PDF绕过SecurityTrustResourceUrl的访问权限

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');