File

src/app/services/file-download/file-download.service.ts

Description

Service for downloading the files using fetch

Index

Methods

Constructor

constructor(document: Document, errorHandler: ErrorHandler)

Initializes the Document and ErrorHandler

Parameters :
Name Type Optional
document Document No
errorHandler ErrorHandler No

Methods

Async download
download(url: string, filename)

Creates a file like object and downloads it

Parameters :
Name Type Optional Default value
url string No
filename No this.getFilename(url)
Returns : Promise<void>
import { DOCUMENT } from '@angular/common';
import { ErrorHandler, Inject, Injectable } from '@angular/core';

/** Service for downloading the files using fetch */
@Injectable({
  providedIn: 'root',
})
export class FileDownloadService {
  /** Initializes the Document and ErrorHandler */
  constructor(
    @Inject(DOCUMENT) private readonly document: Document,
    private readonly errorHandler: ErrorHandler,
  ) {}

  /** Creates a file like object and downloads it */
  async download(url: string, filename = this.getFilename(url)): Promise<void> {
    let blobUrl: string | undefined;

    try {
      const response = await fetch(url, {
        headers: new Headers({
          Origin: location.origin,
        }),
        mode: 'cors',
      });
      const data = await response.blob();
      blobUrl = URL.createObjectURL(data);
      this.createDownloadEl(blobUrl, filename);
    } catch (error) {
      this.errorHandler.handleError(error);
    } finally {
      if (blobUrl) {
        URL.revokeObjectURL(blobUrl);
      }
    }
  }

  /** Returns the file name from the URL */
  private getFilename(url: string): string {
    return url.split('\\').pop()?.split('/').pop() ?? '';
  }

  /** Constructs an anchor element to download the file */
  private createDownloadEl(blobUrl: string, filename: string): void {
    const el = this.document.createElement('a');
    el.href = blobUrl;
    el.download = filename;

    this.document.body.appendChild(el);
    el.click();
    el.remove();
  }
}

results matching ""

    No results matching ""