在边缘渲染PDF，在嵌入中呈现IE11

Question

我想我已经有了一个使用嵌入式的解决方案，这样Adobe就可以在浏览器中呈现PDF了：

<embed src="./assets/pdf/example-1.pdf"
       width="100%"
       height="675px"
       style="border: 1px solid red"
       type="application/pdf">

但是，当我尝试使用src动态设置嵌入URL.createObjectURL(blob)并将其绑定到embed的角度时，它不会呈现：

<embed [src]="url"
       width="100%"
       height="675px"
       style="border: 1px solid red"
       type="application/pdf">

还需要使用blob在嵌入中呈现PDF吗？

this.http(..., { responseType: 'blob', observe: 'response' })
  .subscribe((blob) => {

    url = URL.createObjectURL(blob);

    this.url = this.domSanitizer
      .bypassSecurityTrustResourceUrl(url);
  });

我知道我可以用一个插件来使用带有角的PDF.js，但我不知道如何使用ViewerJS与它一起获得摇摄、缩放等控件。所以，我只想用Adobe和IE11显示在响应中发送的PDF。它可以在iframe中使用，但是这只在边缘中工作，而在没有显示错误的IE11中工作。

例如，在接收到PDF的base64时，为了跨浏览器兼容性而建议使用此方法，但它只适用于边缘而不是IE11。

  // Default to Chrome
  let url = `data:application/pdf;base64,${src}`;

  // Internet Explorer 11 and Edge workaround
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    const byteCharacters = atob(src);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: 'application/pdf' });

    url = URL.createObjectURL(blob);

    if (this.url) {
      // Release URLs for performance and memory usage
      this.window.URL.revokeObjectURL(this.url);
    }
  }

  this.url = this.domSanitizer
    .bypassSecurityTrustResourceUrl(url);


<iframe id="result"
        [src]="url"
        style="width: 100%; height: 95vh; border: 1px solid red;"
        sandbox></iframe>

Answer 1

这对于IE11都适用，如果您从iframe中移除 sandbox属性。通过消除sandbox IE11提供的安全限制，即使caniuse.com表明它与IE11兼容，也是可行的。