How to download pdf file in angular 2

by

In Angular 6, In service downloadPdfFile.service.ts and create the following things.

Import Statement

import {
  HttpClient,
  HttpHeaders
} from '@angular/common/http';

import { map } from 'rxjs/operators';

Method for download pdf

downloadPDF(dataObj) {

    let headerOptions = new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/pdf'
        //   'Accept': 'application/octet-stream', // for excel file
    });

    let requestOptions = { headers: headerOptions, responseType: 'blob' as 'blob' };
    // post or get depending on your requirement
    this.http.post(serviceURL, dataObj, requestOptions).pipe(map((data: any) => {

        let blob = new Blob([data], {
            type: 'application/pdf' // must match the Accept type
            // type: 'application/octet-stream' // for excel 
        });
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'samplePDFFile.pdf';
        link.click();
        window.URL.revokeObjectURL(link.href);

    })).subscribe((result: any) => {
    });

}

component file just call the method

downloadPdf()
{
     let dataObj={}
     this.downoloadPdfFileService.downloadPDF(dataObj);
   
}

More Related Contents:

  1. How I add Headers to http.get or http.post in Typescript and angular 2?
  2. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  3. What is the proper use of an EventEmitter?
  4. How do I create a singleton service in Angular 2?
  5. Angular2: How to load data before rendering the component?
  6. How can I watch for changes to localStorage in Angular2?
  7. Using multiple instances of the same service
  8. How to avoid imports with very long relative paths in Angular 2?
  9. Angular 2 – communication of typescript functions with external js libraries
  10. Angular 2 cache observable http result data [duplicate]
  11. Can lazy-loaded modules share the same instance of a service provided by their parent?
  12. Angular2 – Interaction between components using a service
  13. How to share service between two modules – @NgModule in angular not between to components?
  14. How to call component method from service? (angular2)
  15. Angular2 – Share data between components using services
  16. Testing – Can’t resolve all parameters for (ClassName)
  17. Pass config data using forRoot
  18. How to use Dependency Injection (DI) correctly in Angular2?
  19. Getting Image from API in Angular 4/5+?
  20. Angular 2 – Using Shared Service
  21. angular 2 http withCredentials
  22. Angular 2 – Services consuming others services before call a method
  23. Subscribe to observable is returning undefined
  24. Plain Javascript as Angular 2 service
  25. How to check the length of an Observable array
  26. Property ‘toPromise’ does not exist on type ‘Observable’
  27. Angular 2 – multiple instance of service created

Leave a Comment