A Comprehensive Guide to Displaying PDF Files in Angular 2

Introduction

In Angular 2 development, users often need to view or download PDF files online, requiring developers to integrate effective PDF display functionalities. Based on technical Q&A data, this article extracts core knowledge points and systematically introduces multiple implementation methods, covering modular solutions and flexible alternatives.

Using the ng2-pdf-viewer Module

ng2-pdf-viewer is a module designed for Angular, enabling easy embedding of PDF viewers in browsers. First, install via npm: npm install ng2-pdf-viewer --save. Then, import and declare PdfViewerComponent in the Angular module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    PdfViewerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the component template, use the <pdf-viewer> tag to specify the PDF source path for efficient display. This method simplifies integration and offers rich interactive features.

Handling PDF Streams and Local URLs

When PDF files are provided as streams rather than static files, convert HTTP responses to Blob objects and use Angular's DomSanitizer to ensure URL safety. The following sample code demonstrates fetching a PDF stream from a server and generating a local URL.

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Headers, ResponseContentType } from '@angular/http';

// In a component method
this.http.get('https://example.com/download/pdf-stream', {
  headers: new Headers({
    "Access-Control-Allow-Origin": "*"
  }),
  responseType: ResponseContentType.ArrayBuffer
}).subscribe((data: any) => {
  var pdfBlob = new Blob([data._body], { type: 'application/pdf' });
  this.dataLocalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(pdfBlob));
});

In the template, bind this URL using <iframe>, <object>, or <embed> tags, e.g., <iframe [attr.src]="dataLocalUrl" type="application/pdf" width="500" height="600"></iframe>. This approach is suitable for dynamic PDF content, enhancing flexibility.

Simple Method: Using the Embed Tag

For static PDF files, directly use the HTML <embed> tag as the quickest solution. Add the following code to the template:

<embed src="/assets/pdf/example.pdf" style="width: 100%; height: 500px" type="application/pdf">

This method requires no additional modules but offers limited functionality, ideal for basic display needs.

Conclusion

When selecting a PDF display method, consider the PDF source and project requirements. The ng2-pdf-viewer module provides professional-level integration for complex scenarios; handling PDF streams supports dynamic content; while the simple embed method is suitable for rapid prototyping. Developers should weigh security, performance, and ease of use to optimize user experience.