js中实现单按钮，多文件下载

原创于 2019-07-22 16:33:16 发布 · 961 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js全部下载功能

js/jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的批量文件下载功能。通过点击一个按钮，可以依次下载指定的多个文件，每个文件将单独保存而非存入同一目录。该方法利用了iframe元素来触发文件下载。

描述

单击按钮，实现多文件下载，即全部下载功能。

一个文件一个文件的保存，不是所有文件保存同一目录。

实现

js

downAll：触发按钮id

arr：要下载的文件列表

$("#downAll").on("click",function () {
    var arr;
    for (var i=0;i<arr.length;i++) {
        downloadFile(downloadAll+"?fileId="+data[i].id);
    }

})

function downloadFile(url) {
    var iframe = document.createElement("iframe");
    iframe.style.display = "none"; // 防止影响页面
    iframe.style.height = 0; // 防止影响页面
    iframe.src = url;
    document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
    // 5分钟之后删除
    setTimeout(function () {
        iframe.remove();
    }, 5 * 60 * 1000);
};