CODEWITHSUNDEEP
angularpdfiframe
Monica
Monica

Reputation: 170

Angular 5- PDF document , download and show in the new window

I am working Angular as Front End and I am getting data from REST Full Web Service. 1) I need to show the pdf file in new window of the web browser which I am getting data from the web service as base 64.

Problem: I am able to download the file but when i try to open the file in new window its showing (ERROR: Failed to load the pdf content). Here is my code:

service:

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: In HTML i used IFRAME to display pdf data

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

Could any one please help me. Thanks

Upvotes: 2

Views: 7218

Answers (3)

Breno Prata
Breno Prata

Reputation: 732

If you want do display a base 64 pdf you can use my component https://www.npmjs.com/package/ng2-image-viewer

It works with angular 2+ and it renders Base 64 images, URL Images and Base 64 PDFs, it's easy to implement, you just have to:

1) Run npm install ng2-image-viewer --save

2) Add these codes on your angular-cli.json file:

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

3) Import ImageViewerModule

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

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

4) Now you can use it as you wish:

<!-- 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>

Here is a demo of it Ng2-Image-Viewer Showcase

For more info you can check the link above :)

Upvotes: 1

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

In order to download the pdf file, you can try this below code. You cannot open the pdf file in desktop.

  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);
      }
   });

}

Upvotes: 4

Akshay Rajput
Akshay Rajput

Reputation: 2078

If opening the file in a new window is not a problem, and you are using a modern browser like chrome, they can automatically handle pdf,

window.open(URL, '_blank');

else if you need to do all this work manually you can use npm packages like,

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

if you don't have much requirement from pdf viewer like export mail download etc, you can use HTML elements

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

Make sure to change the width and height for your needs. Good luck!

Upvotes: 0

Related Questions