前端HTML页面实现批量下载

前端HTML页面实现批量下载

一、前言

前端HTML实现下载功能可在JavaScript 代码中写window.location.href ="链接地址"，但是如果想同时打开多个链接进行下载，使用for循环window.location.href ="链接地址"是不行的，因为相当于打开了一个窗口，循环无法进行下去。

二、实现

<script>
//批量下载文件
    function downloadAllFile() {
        var selectIds = $.common.isEmpty($.table._option.id) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.id);
        if (selectIds == null || selectIds.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        let triggerDelay = 100;
        let removeDelay = 1000;
        $.each(selectIds, function (i,fileId) {
            download(fileId, triggerDelay, removeDelay);
        });
    }
    function download(fileId,triggerDelay, removeDelay) {
        setTimeout(function() {
            //动态添加iframe，设置src，然后删除
            var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');
            //src设置下载地址
            frame.attr('src', prefix+ 'downloadFile/?id='  + fileId);
            $(document.body).after(frame);
            setTimeout(function() {
                frame.remove();
            }, removeDelay);
        }, triggerDelay);
    }

</script>