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)并将其绑定到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);
  });

我知道我可以使用插件通过Angular使用PDF.js，但是我不知道如何使用ViewerJS来获得平移，缩放等控件。所以我只想显示发送的PDF使用Adobe在Edge和IE11中降低响应速度。它可以位于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中删除属性，那么这一切都适用于IE11。通过消除sandbox IE11提供的安全限制来实现安全，即使caniuse.com表示它符合IE11。

在Edge中呈现PDF，并在嵌入中呈现IE11

1 个答案: