通过前端页面试图实现批量下载的一些探索_前端bootstrap 批量下载-优快云博客

本文链接：https://blog.youkuaiyun.com/FlyToMyHeart/article/details/80519069

本文探讨了使用JavaScript实现批量文件下载过程中遇到的问题及解决方案。作者尝试了多种方法，包括使用window.location.href和window.open，但都无法成功下载多个文件。最终考虑从后端着手解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接到一个需求，就是要做一个批量下载的功能，心想这还不简单，然而结果并不是这个样子。

<button type="button" class="btn btn-primary"
      data-toggle="modal" id="downloadBtn"
      <nn:roleButton value="30101020"/>>
      <i class="fa fa-download"></i> 文件下载
</button>

$('#downloadBtn').on('click', function (e) {
            var rows = $("#oper_table").bootstrapTable('getSelections');
            if (rows.length < 1) {
                Messenger().post("请选择一行!");
                return false;
            }
            var row = rows[0];
            $("#url_down").val(row.url);
            downloadFile();

function downloadFile() {
    var rows = $("#oper_table").bootstrapTable('getSelections');
    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var  spath=row.cont_path;
        if (spath == "" || spath == null) {
            Messenger().post("下载失败！当前选项中文件路径不存在！");
            $('#downloadModal').modal('hide');
            return false;
        }
        var begin = spath.lastIndexOf("\/");
        var filename = spath.substr(begin + 1, spath.length - begin);
        var path = spath.substr(0, begin);
        file_path = path + "/" + filename;
        var url = "${context_root}/common/fileDown.jsp?filePath=" + file_path + "&fileName=" + filename;
        window.location.href = url;
    }

}

我是在这里做了一个循环遍历，希望可以多次调用filedown来实现批量下载，然而并不能实现，在循环的过程中，中间的几次文件都没有下载，只有最后一次可以下载到。针对这个问题，在网上搜集了一些信息：意思是循环的速度很快，而window.location.href速度很慢，所以没有打开那个地址。

之后我稍微做了改动，把window.location.href改为了window.open，效果自然是变了，不过只是可以下载第一次遍历到的。window.open会打开一个新的窗口，之后循环就停止了。

之后我又换了一种方法，我通过拼串的方式，以GET方式把这个字符串穿过去。

url =  url + file_path + "&" + filename + ",";

传过去之后，在filedown页面进行拆分，之后再遍历。然而并没有实现。这次只是把filedown.jsp这个页面下载下来，还是空白的。

大家有什么方法请指教，我先去尝试一次后台做处理的方式啦。