How do I download a file with Angular2 or greater

javascript

file-downloads

angular

http-client

byNikita Barsukov·Feb 12, 2025

Performing file downloads in Angular can be achieved with the HttpClient module. We fetch the file as a Blob and use the FileSaver.js library to trigger a save dialog. Here is a sample implementation:

import { HttpClient } from '@angular/common/http';
import { saveAs } from 'file-saver';

// Meet your friendly FileSaver! (Who needs memory when you have FileSaver?)
constructor(private http: HttpClient) {} 

downloadFile(url: string, filename: string): void {
  this.http.get(url, { responseType: 'blob' })  // Now Blob joins the party!
    .subscribe(blob => saveAs(blob, filename)); // And they lived happily ever after
}

Highlight:

Setting responseType: 'blob' will handle binary files.
The saveAs function from FileSaver.js is used for saving files.

Direct Download with Less Dependencies

Cut the unnecessary weights! If you prefer not to depend on extra libraries, you can create a download link directly:

constructor(private http: HttpClient) {}

// Let's do it old-school way!
downloadFile(url: string, filename: string): void {
  this.http.get(url, { responseType: 'blob' }).subscribe(blob => {
    const fileURL = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = fileURL;
    link.download = filename;
    link.click();

    // Clean up after yourself! That's what mom always said.
    window.URL.revokeObjectURL(fileURL);
  });
}

Advantages:

No dependency on external libraries.
The good old native JavaScript way.
Initiates the file download programmatically.

Handling Potential Download Errors

It's not all roses. When dealing with file downloads, you should prepare for potential pitfalls. Here's how to handle them gracefully:

downloadFile(url: string, filename: string): void {
  this.http.get(url, { responseType: 'blob' })
    .subscribe(
      blob => saveAs(blob, filename),
      error => console.error('DOWNLOAD ERROR:', error) // "Mother always said life was like a box of errors. You never know what you're gonna get." - Forrest Gump(ish)
    );
}

Tips for Successful Angular File Downloads

Here are some tips that can elbow your way to success with file downloads in Angular:

responseType: 'blob': Ensure your HTTP Request options are set to receive binary data.
Centralize download logic: Implement a dedicated service to handle file downloads.
FileSaver Library: When you need to support different browsers and deal with complex saving functions, this library is your saving grace.

explain-codes / Javascript / How do I download a file with Angular2 or greater

Linked

Download data URL file



Using HTML5/JavaScript to generate and save a file



Download a file by jQuery.Ajax



How to set the name of a file downloaded from a browser?



Is it possible to write data to file using only JavaScript?

