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修改檔名方式。

缺點需要先下載檔案，需要設計下載進度，且無法斷點續傳。