使用javascript下载多个文件不起作用答案

【问题标题】：Multiple file download using javascript not working使用javascript下载多个文件不起作用
【发布时间】：2021-02-11 10:48:20
【问题描述】：

我正在使用 javascript 从 url 下载多个文件。

我已使用以下网址执行此操作，但没有找到任何解决方案，

它在 Firefox 和 google chrome 上运行良好，但不适用于 ie 和 edge

我使用了以下代码。

reportFileList.forEach((report, index) => {
    var downloadUrl = report
    setTimeout(function() {
        var a = document.createElement('a');
        a.href = downloadUrl;
        a.target = '_parent';
        if ('download' in a) {
            a.download = downloadUrl;
        }

        (document.body || document.documentElement).appendChild(a);
        if (a.click) {
            a.click(); // The click method is supported by most browsers.
        } 
        a.parentNode.removeChild(a);
    }, 500);
});

【问题讨论】：

您的浏览器 developer 工具控制台中是否出现任何错误？
不，我没有收到任何错误，它只是下载最后的文件
它适用于 Firefox 和 google chrome，但不适用于 ie 和 edge
对，这类信息可能会在问题中有用 - 微软浏览器不像其他浏览器那样工作的事实非常令人惊讶和罕见
据我了解，您正在以编程方式创建链接元素，单击它们然后删除它们以加载其页面。这是一种冗长的做事方式。另外，我不明白这一点，因为您一次只能加载一个页面。你想达到什么目的？ “不，我没有收到任何错误，它只是下载最后一个文件”如果你说只加载一个页面，那完全有道理：浏览器知道一次加载多个页面是愚蠢的，所以它取消了除了最后一次加载。也许您希望不同页面的 setTimeout 间隔不同？

标签： javascript jquery

【解决方案1】：

那段代码有效（在 Chrome 中测试）问题一定出在其他地方：

reportFileList 变量可能格式不正确。
某些浏览器会提示您进行多次下载，必须启用。

示例：http://js.do/code/161479

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<p style="line-height: 18px; font-size: 18px;  font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>

<script>
var reportFileList = ['https://www.example.com','https://www.example.com','https://www.example.com'];
reportFileList.forEach((report, index) => {
            var downloadUrl = report
                setTimeout(function() {
                    var a = document.createElement('a');
                    a.href = downloadUrl;
                    a.target = '_parent';
                    if ('download' in a) {
                        a.download = downloadUrl;
                    }

                    (document.body || document.documentElement).appendChild(a);
                    if (a.click) {
                        a.click(); // The click method is supported by most browsers.
                    } 
                    a.parentNode.removeChild(a);
                }, 500);



    });
</script>

【讨论】：

是的，它在 chrome 上工作正常，你清楚地检查了我的问题吗？
我已经清楚地阅读了您的问题，问题是您稍后编辑了问题以包含这些详细信息：stackoverflow.com/posts/45143177/revisions

【解决方案2】：

我已经用下面的代码解决了--> 也许它可以帮助某人。

function download_files(files) {
function download_next(i) {
 if (i >= files.length) {
   return;
 }
 var a = document.createElement('a');
 a.href = files[i].download;
 a.target = '_blank';

 if ('download' in a) {
   a.download = files[i].download;
 }

 (document.body || document.documentElement).appendChild(a);
 if (a.click) {
   a.click(); // The click method is supported by most browsers.
 }
 else {
    window.open(files[i].download);
 }
 console.log('1');
 a.parentNode.removeChild(a);
 setTimeout(function() {
   download_next(i + 1);
 }, 5000);
}
// Initiate the first download.
download_next(0);
}

function do_dl() {
 download_files([
   { download: "https://www.example.com"},
   { download: "https://www.example.com"},
   { download: "https://www.example.com"},
   { download: "https://www.example.com"},
 ]);
};


do_dl();

【讨论】：

【解决方案3】：

我有同样的问题。对我有用的修复方法是将 a 标记的目标更改为 _blank 目标并允许在浏览器中获得 Popups 权限。

【讨论】：