DEV Community

Prateek Kr
Prateek Kr

Posted on

5

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay