I am currently facing an issue with downloading multiple files using TypeScript in Angular 6. I am receiving an array of blobs from a web API service.
Here is the service method used to get multiple blobs for downloading:
private downloadTest(): void {
this.downloadService$().subscribe((blobs: Blob[]) => {
blobs.forEach((blob: Blob, index: number) => {
FileDownloader.startDownload(blob);
});
});
}
Within a loop, I am invoking the startDownload method to initiate the file download as shown below:
export class Downloader {
public static startDownload(blob: Blob): void {
blob = new Blob([blob], { type: "type of file" });
const url = window.URL.createObjectURL(blob);
const anchor = document.createElement("a");
document.body.appendChild(anchor);
anchor.download = "fileName";
anchor.target = "_blank";
anchor.href = url;
anchor.click();
document.body.removeChild(anchor);
window.URL.revokeObjectURL(url);
}
}
While this code works well in Chrome, it encounters issues in Firefox where clicking on the anchor element breaks the loop, resulting in some files not being downloaded completely.
Upon removing the line anchor.download = "fileName";, the files can be downloaded in Firefox too, but each file opens in a new tab with a random filename.
Despite trying various solutions, I have been unable to resolve this issue and ensure that each file downloads in a loop with a specific filename.
Any assistance or guidance on this matter would be greatly appreciated.
Best regards, Raj Sharma