在 Edge 中渲染 PDF，在 Embed 中渲染 IE11

Question

我想我有一个使用嵌入的解决方案，这样 Adobe 就会在我这样做时在浏览器中呈现 PDF：

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

但是当我尝试使用 URL.createObjectURL(blob) 动态设置嵌入 src 并将其绑定到 Angular 中的 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 与 Angular 一起使用，但我不知道如何使用 ViewerJS 来获取平移、缩放等控件。所以我只想在 Edge 和 IE11 中使用 Adobe 显示响应中发送的 PDF。它可以在 iframe 中，但这只在 Edge 中有效，在 IE11 中无效，没有显示错误

例如，在接收 base64 PDF 时，建议使用此功能以实现跨浏览器兼容性，但它仅适用于 Edge，不适用于 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

如果您从 iframe 中删除 sandbox 属性，这一切都适用于 IE11。 Sooo 通过删除 sandbox 提供的安全限制，即使 caniuse.com 表明它与 IE11 兼容，IE11 仍然有效。

在 Edge 中渲染 PDF，在 Embed 中渲染 IE11

Render PDF in Edge and IE11 in an Embed

pdf

internet-explorer-11

microsoft-edge

angular

angular5