Question

我正在将Angular用作前端，并且正在从REST Full Web Service获取数据。 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

如果在新窗口中打开文件不是问题，并且您使用的是现代浏览器（例如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" />

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

Answer 2

为了下载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 3

如果要显示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

有关更多信息，您可以检查上面的链接：）

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

3 个答案: