How to download a file in Angular using document API

Published at

10/13/2024

Introduction

Downloading files is a common functionality in web applications, essential for exporting data, sharing documents, and more. In this guide, I’ll cover different techniques to download files in Angular, ensuring you have the flexibility to choose the best method for your specific needs.

Prerequisites

Before we dive in, ensure you have the following:

Angular CLI installed

A basic Angular project setup

A server endpoint that provides the file

Step 1: Import HTTPClientModule

First, ensure the HttpClientModule is imported in your AppModule:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // other imports
  ],
})
export class AppModule {}

Step 2: Create a Service for File Download

Create a service to handle the file download:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FileService {
  constructor(private http: HttpClient) {}

  downloadFile(url: string): Observable<Blob> {
    return this.http.get(url, { responseType: 'blob' });
  }
}

Step 3: Use the Service in a Component

Use the service in your component to download the file:

import { Component } from '@angular/core';
import { FileService } from './file.service';

@Component({
  selector: 'app-file-download',
  template: `<button (click)="download()">Download File</button>`,
})
export class FileDownloadComponent {
  constructor(private fileService: FileService) {}

  download() {
    const url = 'https://example.com/file.pdf';
    this.fileService.downloadFile(url).subscribe((blob) => {
      const a = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      a.href = objectUrl;
      a.download = 'file.pdf';
      a.click();
      URL.revokeObjectURL(objectUrl);
    });
  }
}

Conclusion

Downloading files in Angular can be accomplished using various methods, each with its own benefits. Whether you prefer using Angular’s built-in HttpClient or leveraging external libraries, understanding the techniques will empower you to handle file downloads effectively.