DEV Community

Prateek Kr
Prateek Kr

Posted on

How to download a file in Angular using document API

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 {}

Enter fullscreen mode Exit fullscreen mode

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' });
  }
}

Enter fullscreen mode Exit fullscreen mode

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);
    });
  }
}

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)