网页JS下载多文件，并改文件名

1、使用加入多个iframe方法，打开多个链接

function _createIFrame(url, triggerDelay, removeDelay) {
    setTimeout(() => {
        let frame = document.createElement('iframe');
        frame.style = 'display: none;';
        frame.class = 'multi-download';
        frame.src = url,

        document.body.appendChild(frame);
        setTimeout(function () {
            document.body.removeChild(frame);
        }, removeDelay);

    })
}

function _downloadFiles(fileUrls) {
    const triggerDelay = 100,
    removeDelay = 1000;
    fileUrls(v => {
        this._createIFrame(v.src, k * triggerDelay, removeDelay);
    })
}

需要浏览器同意下载多个文件。

这个方法无法修改下载文件名，只能使用链接的名字，如果链接没有文件格式名，无法修改

2、html5新增了a表现download属性，强制调用下载。

使用Blob对象(二进制大对象)下载文件，Blob需要先通过xhr方式下载文件数据，生成Blob。

URL.createObjectURL可以把Blob对象，转化成url字符串，放入a标签中。

function handleStartDownload(fileContents) {
    for (let i = 0; i < fileContents.length; i++) {
        let a = document.createElement('a');
        let blob = fileContents[i].blob;
        let filename = fileContents[i].filename;
        
        /** // 如果文件名有中文，win平台需要转成gb2312编码，否则文件名乱码
         * if ((navigator.platform == "Win32") || (navigator.platform == "Windows")) {
            return Utf8ToGb2312(filename);
        }
         * */

        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dispatchEvent(new MouseEvent('click'));
    }
}

function handleRequestFile(url, filename) {
    return new Promise((resolve, reject) => {
        superagent
            .get(url)
            .responseType('blob')   /// 输出blob对象
            .end((err, res)=>{
                let file = {filename:filename, blob:res.xhr.response, mime:res.type};
                resolve(res.status);
            })
    })
}

async function downloadFile(fileUrls) {
    let fileContents = [];
    for (let i = 0; i < fileUrls.length; i++) {
        let file = await handleRequestFile(fileUrls[i].url, fileUrls[i].filename);
        fileContents.push(file);
    }

    await handleStartDownload(fileUrls);
}

blob方式下载可以修改文件名，最成功的js修改文件名方式。

缺点需要先下载文件，需要设计下载进度，且无法断点续传。