Angular 5- PDF 文档，下载并在新窗口中显示

Question

我正在使用 Angular 作为前端，我正在从 REST 完整 Web 服务获取数据。 1) 我需要在 Web 浏览器的新窗口中显示 pdf 文件，我从 Web 服务获取数据为 base 64。

问题：我可以下载文件，但是当我尝试在新窗口中打开文件时，它会显示（错误：无法加载 pdf 内容）。这是我的代码：

服务：

this.http.get('https://localhost:44364/api/v1/source/GetImage/parameter1/animal.pdf', { responseType:'arraybuffer' })
    .subscribe(response => {
    var file = new Blob([response], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);

    this.content=this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);
});

HTML：在 HTML 中我使用 IFRAME 来显示 pdf 数据

iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="content"

谁能帮帮我。谢谢

Answer 1

为了下载 pdf 文件，你可以试试下面的代码。您无法在桌面上打开 pdf 文件。

  this.httpClient.get('../assets/sample.pdf', { responseType: 'arraybuffer' 
    }).subscribe(response => {
      console.log(response);

      const file = new Blob([response], {type: 'application/pdf'});
      const fileURL = window.URL.createObjectURL(file);
      /*const link = document.createElement('a');
      link.href = fileURL;
      link.download = 'sample.pdf';
      link.click();*/
      if (window.navigator.msSaveOrOpenBlob) {
           window.navigator.msSaveOrOpenBlob(file, fileURL.split(':')[1] + '.pdf');
      } else {
           window.open(fileURL);
      }
   });

}

Answer 2

如果您想显示 base 64 pdf，您可以使用我的组件 https://www.npmjs.com/package/ng2-image-viewer

它适用于 angular 2+，它可以渲染 Base 64 图像、URL 图像和 Base 64 PDF，它很容易实现，您只需：

1) 运行npm install ng2-image-viewer --save

2) 在 angular-cli.json 文件中添加这些代码：

"styles": [
     "../node_modules/ng2-image-viewer/imageviewer.scss"
],
"scripts": [
     "../node_modules/ng2-image-viewer/imageviewer.js"
],

3) 导入 ImageViewerModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4) 现在你可以随心所欲地使用它了：

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

这是它的演示Ng2-Image-Viewer Showcase

有关更多信息，您可以查看上面的链接:)

Answer 3

如果在新窗口中打开文件没有问题，并且您使用的是现代浏览器，例如 chrome，它们可以自动处理 pdf，

window.open(URL, '_blank');

如果您需要手动完成所有这些工作，您可以使用 npm 包，例如，

https://www.npmjs.com/package/ng2-pdf-viewer

如果您对 pdf 查看器的要求不高，例如导出邮件下载等，您可以使用 HTML 元素

<embed src="file_name.pdf" width="800px" height="2100px" />

确保根据需要更改宽度和高度。祝你好运！