无法在 Angular 应用程序中显示 PDF 文件

Question

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:

• How to Display blob (.pdf) in an AngularJS app
• Angular 2 download PDF from API and Display it in View
• PDF Blob - Pop up window not showing content
• Failed to load PDF document - Angular JS - BLOB

Answer 1

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

Answer 2

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.