多文件下载不是在 Firefox 中下载所有文件，锚点击问题

Question

我正在尝试在 angular 6 中使用打字稿下载多个文件，从网络 API 服务中我得到了一个 blob 数组。

获取我需要下载文件的多个 blob 的服务：

 private downloadTest(): void {
    this.downloadService$().subscribe((blobs: Blob[]) => {
        blobs.forEach((blob: Blob, index: number) => {
            FileDownloader.startDownload(blob);
        });
    });
}

在一个循环中，我正在调用 startDownload 方法来下载文件，如下所示：

  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);
    }    
}

上面的代码在 Chrome 中运行良好，但是在 Firefox 中，当执行锚点单击时，它会中断循环并且文件的其余部分不会被下载，

当我删除 anchor.download = "fileName";它也会在 firefox 中下载文件，但打开和关闭新选项卡。此外，文件名将是随机的。

我尝试了很多东西，但没有任何效果。

我只是想循环下载文件作为不同的文件，具有指定的文件名。

提前致谢。

此致，拉吉夏尔马

Answer 1

我尝试了很多在 Firefox 中工作的方法，最后我设置并增加了每个下载的超时时间，这样一个下载就不会影响另一个下载。可能对某人有帮助。

private downloadTest(): void {
    this.downloadService$().subscribe((blobs: Blob[]) => {
 let intervalTimeOut = 0;
                blobs.forEach(function (blob, index): void {
                    setTimeout(function (): void {
                        startDownload(blob, fileInfos[index]);
                    }, intervalTimeOut += 100);
                });
    });
}

多文件下载不是在 Firefox 中下载所有文件，锚点击问题

Multiple file download is not downloading all files in Firefox, anchor click problem

anchor

firefox

download

typescript

angular