如何用js实现多个url的文件的下载

Question

需求：
后台返回数组，里边是多个url，每个url都是一个excel文件。

期望：
把这几个url全部下载了。

我的尝试：
我不知道location.href的情况，
第一次尝试：
我写了个for循环，结果：只下载了最后一个文件

for(var i = 0; i < urlArr.length; i++) {
  window.location.href = urlArr[i]
}

第二次尝试：
我在for循环里写了个自执行函数，结果：只下载了最后一个文件

for(var i = 0; i < urlArr.length; i++) {
  (function(i) {
    window.location.href = urlArr[i]
  })(i)
}

大佬们，你们有什么思路吗？

Answer 1

自问自答:

let triggerDelay = 100;
let removeDelay = 1000;
let url_arr=[];
//多个file文件选择checkbox
$('input[name="filePath"]:checked').each(function(){
    url_arr.push($(this).val());//取到下载url
});
url_arr.forEach(function(item,index){
    _createIFrame(item, index * triggerDelay, removeDelay);
})
function _createIFrame(url, triggerDelay, removeDelay) {
    //动态添加iframe，设置src，然后删除
    setTimeout(function() {
        var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');
        frame.attr('src', url);
        $(document.body).after(frame);
        setTimeout(function() {
            frame.remove();
        }, removeDelay);
    }, triggerDelay);
}

Answer 2

试试定时器，间隔100ms 试试看。

Answer 3

for循环瞬间执行的，所以只下载到最后一个文件
封装下下载，不然下载体验会很差，写个定时器调用函数，最后记得清理定时器，

downloadFile(url, filename) {
//filename下载出来自定义的名字，url是下载地址
    var link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    link = null;
}

Answer 4

1. 压缩成zip下载
2. 利用iframe下载

Answer 5

    /**
     * 导出excel文件
     * @param url String 接口地址
     * @param params JSON 接口参数
     * @param file string 文件保存名称
     *
     * @returns {Promise<void>}
     */
    async downloadExcel(url, params = {}, file = 'export.xls') {
        try {
            let {
                data: data
            } = await this.axios.post(url, this.form(params), {
                responseType: 'arraybuffer'
            });
            let blob = new Blob([data], {
                type: 'application/x-xls'
            });
            if (window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveBlob(blob, file);
            } else {
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = file;
                document.body.appendChild(link);
                link.click();
                window.URL.revokeObjectURL(link.href);
                document.body.removeChild(link);
            }
        } catch (err) {
            console.log(err);
            this.$message.error(err.message);
        }
    },

这是我们项目中使用的, 对你来说只需要循环执行downloadExcel就好.