How can Create blob url then download bulk pdf in Angular

1. Create a Service to Handle PDF Generation and Download:

First, create a service to manage the PDF files. This service will handle generating blob URLs and triggering downloads.

typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  generateBlobUrl(pdfData: Blob): string {
    return URL.createObjectURL(pdfData);
  }

  downloadPdf(blobUrl: string, fileName: string): void {
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl);
  }
}

2. Create a Component to Trigger the Download:

Next, create a component that will call the service to generate and download the PDFs.

typescri
import { Component } from '@angular/core';
import { PdfService } from './pdf.service';

@Component({
  selector: 'app-pdf-downloader',
  templateUrl: './pdf-downloader.component.html',
})
export class PdfDownloaderComponent {

  constructor(private pdfService: PdfService) {}

  downloadBulkPdfs() {
    const pdfDataArray: { data: Blob; name: string }[] = this.getPdfData();

    pdfDataArray.forEach(pdf => {
      const blobUrl = this.pdfService.generateBlobUrl(pdf.data);
      this.pdfService.downloadPdf(blobUrl, pdf.name);
    });
  }

  private getPdfData(): { data: Blob; name: string }[] {
    // Simulating PDF data retrieval. Replace this with actual PDF data retrieval logic.
    return [
      { data: new Blob(['PDF Content 1'], { type: 'application/pdf' }), name: 'file1.pdf' },
      { data: new Blob(['PDF Content 2'], { type: 'application/pdf' }), name: 'file2.pdf' },
      // Add more PDF data as needed
    ];
  }
}

3. Create the HTML Template:

Finally, create an HTML template for your component.

html
<button (click)="downloadBulkPdfs()">Download PDFs</button>

Explanation:

• Blob Creation: Each PDF is represented as a Blob. Replace the simulated PDF data in getPdfData with your actual PDF generation logic.
• Blob URLs: URL.createObjectURL() generates a URL for each PDF Blob.
• Download Logic: A temporary anchor element is created for downloading each PDF file.
• Memory Management: URL.revokeObjectURL() is called after the download to release memory.

Final Notes:

Ensure you have the necessary permissions and configurations set up in your Angular application to handle file downloads properly. You may also want to handle errors and loading states for a better user experience.