Angular: How to download a file from HttpClient?

by

Blobs are returned with file type from backend. The following function will accept any file type and popup download window:

downloadFile(route: string, filename: string = null): void{

    const baseUrl="http://myserver/index.php/api";
    const token = 'my JWT';
    const headers = new HttpHeaders().set('authorization','Bearer '+token);
    this.http.get(baseUrl + route,{headers, responseType: 'blob' as 'json'}).subscribe(
        (response: any) =>{
            let dataType = response.type;
            let binaryData = [];
            binaryData.push(response);
            let downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
            if (filename)
                downloadLink.setAttribute('download', filename);
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }
    )
}

More Related Contents:

  1. Angular HttpClient “Http failure during parsing”
  2. How to make a sequence of http requests in Angular 6 using RxJS
  3. Property ‘json’ does not exist on type ‘Object’
  4. Angular 4 HttpClient Query Parameters
  5. Angular 4/5 HttpClient: Argument of type string is not assignable to ‘body’
  6. How to mock Angular 4.3 httpClient an error response in testing
  7. Adding a HTTP header to the Angular HttpClient doesn’t send the header, why?
  8. How do I share data between components in Angular 2?
  9. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  10. Ionic 2 Form goes up when keyboard shows
  11. When to use square brackets [ ] in directives @Inputs and when not?
  12. Angular2 – Interaction between components using a service
  13. Reactive forms – disabled attribute
  14. How to implement sleep function in TypeScript?
  15. Build Angular2 HTML and TypeScript to a single file
  16. Angular subscribe elegant
  17. How to allow access outside localhost
  18. Angular – Make multiple HTTP calls sequentially
  19. @types/googlemaps/index.d.ts’ is not a module
  20. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  21. Pass parameter into route guard
  22. Typescript dependency injection public vs private
  23. Rxjs Retry with Delay function
  24. What is the meaning of question mark in expressions in Angular 2?
  25. Merging http observables using forkjoin
  26. Property ‘toPromise’ does not exist on type ‘Observable’
  27. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  28. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  29. Page transition animations with Angular 2.0 router and component interface promises
  30. Angular load external configuration before AppModule loads

Leave a Comment