File Downloads

Use the built-in file download utilities with generated services.

Basic Usage

downloadFileOperator

import { Component, inject } from '@angular/core';
import { downloadFileOperator } from './client/utils/file-download';
import { ReportsService } from './client/services';

export class ReportsComponent {
  private readonly reportsService = inject(ReportsService);

  downloadReport(reportId: number) {
    this.reportsService.getReportPdf(reportId)
      .pipe(
        downloadFileOperator('report.pdf')
      )
      .subscribe();
  }
}

Dynamic Filenames

downloadReport(reportId: number) {
  this.reportsService.getReportPdf(reportId)
    .pipe(
      downloadFileOperator(`report-${reportId}.pdf`)
    )
    .subscribe();
}

Function-Based Filenames

downloadReport(reportId: number) {
  this.reportsService.getReportPdf(reportId)
    .pipe(
      downloadFileOperator((blob: Blob) => {
        const date = new Date().toISOString().split('T')[0];
        return `report-${reportId}-${date}.pdf`;
      })
    )
    .subscribe();
}

Extract Filename from Headers

extractFilenameFromContentDisposition

import { HttpClient, HttpResponse } from '@angular/common/http';
import { extractFilenameFromContentDisposition, downloadFile } from './client/utils/file-download';

export class FilesService {
  private readonly http = inject(HttpClient);

  downloadWithHeaders(url: string) {
    this.http.get(url, { 
      responseType: 'blob',
      observe: 'response'
    }).subscribe((response: HttpResponse<Blob>) => {
      const contentDisposition = response.headers.get('Content-Disposition');
      const filename = extractFilenameFromContentDisposition(
        contentDisposition,
        'download.pdf'
      );
      
      if (response.body) {
        downloadFile(response.body, filename);
      }
    });
  }
}

Direct Download Function

downloadFile

import { downloadFile } from './client/utils/file-download';

// Direct usage without operator
this.reportsService.getReportPdf(reportId).subscribe(blob => {
  downloadFile(blob, 'report.pdf');
});

Response Type Mapping

Configure blob responses in your OpenAPI config:

// openapi.config.ts
const config: GeneratorConfig = {
  options: {
    responseTypeMapping: {
      'application/pdf': 'blob',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'blob'
    }
  }
};

Resources

• RxJS Operators ↗️
• Angular HTTP Client ↗️