CODEWITHSUNDEEP
angularjsangular
Tung
Tung

Reputation: 5

Unable to display a PDF file in Angular app

I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.

Here is what I have, after looking at various answers:

In *.component.ts:

  openPDF() {
    this.myService.fetchPDF().subscribe(
      res => {
        let file = new window.Blob([res], {type: 'application/pdf'});
        let fileURL = window.URL.createObjectURL(file);
        window.open(fileURL, '_blank');
      }
    );
  }

In *.service.ts:

  fetchPDF(): any {
    const path = 'assets/pdf/fileName.pdf';
    return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
  }

I already tried using responseType : 'arraybuffer', but it didn't work out either.

Here are the threads I have looked at:

Upvotes: 0

Views: 4749

Answers (2)

anothercoder
anothercoder

Reputation: 593

You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.

Upvotes: 0

amanpurohit
amanpurohit

Reputation: 1296

I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code

In *.service.ts:

fetchPDF(): any {
  const path = 'assets/pdf/fileName.pdf'
  return path;
}

In *.component.ts:

openPDF() {
  window.open(this.myService.fetchPDF(), '_blank');
}

Upvotes: 1

Related Questions