在边缘浏览器上获取 PDF 绕过安全信任资源网址的访问被拒绝

Question

当前行为

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

预期行为

应查看 PDF 文件

使用指令对问题的最小再现

此行产生问题

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

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

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

这是安全网址管道

@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查看器使用对象标签不适用于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');