純前端完成批量下載檔案功能，可以下載任何檔案，開箱即用

阿新 • • 發佈：2020-11-24

最近工作中遇到了一個批量下載檔案的需求，要求在前端實現，本來打算在網上找一下CV完事。但是找一圈下來沒有一個合適的，不是隻支援下載圖片，就是寫的過於簡略。無奈，只能自己搞！自己動手，豐衣足食，本著我為人人，人人為我的原則。特寫下此篇部落格，以供參考。

這個批量下載支援多種檔案格式混合這下載，結果都會別放進一個壓縮包中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/FileSaver.js"></script>
<script src="./js/jquery-2.0.0.min.js"></script>
<script src="./js/jszip.min.js"></script>
<script src="./layer/layer.js"></script>

<body>
    <button onclick="downlist()">下載</button>
</body>
<script>
    // 
 檔案列表陣列
    let pafurl = [
        { url: "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1546500353,2204894501&fm=26&gp=0.jpg", name: "0.jpg" },
        { url: "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2771978851,2906984932&fm=26&gp=0.jpg", name: "1.jpg" },
        { url: "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3922290090,3177876335&fm=26&gp=0.jpg", name: "2.jpg" },
        { url:  
"./pdf/0.pdf", name: "1.pdf" },
        { url: "./pdf/2.xlsx", name: "2.xlsx" },
        { url: "./pdf/3.docx", name: "3.docx" }
    ]
    // 壓縮包名稱
    const downLoadName = "批量下載壓縮包.zip";
    // 點選下載按鈕
    function downlist() {
        /*
            批量下載方法，傳入檔案列表，
            路徑key名稱必須為url，檔案key名必須為name
            檔名稱必須攜帶字尾且不能重複
         
*/
        dowmurls(pafurl).then(res => {
            console.log(res);
            // 下載成功的個數
            let successCount = pafurl.length - res.errUrls.length;
            // 下載失敗的個數
            let errorCount = res.errUrls.length;
            if (res.code === "success") {
                // 下載失敗的檔案
                console.log(res.errUrls);
                // 提示
                layer.confirm(`${successCount}個檔案獲取成功,${errorCount}個檔案獲取失敗`, {
                    btn: ['確定', '取消']
                }, function (e) {
                    // 點選確定關閉彈框並下載
                    layer.close(e)
                    // 利用file-saver儲存檔案
                    saveAs(res.content, downLoadName);
                })
            } else {
                layer.alert("檔案下載失敗", { icon: 2 })
            }
        });
    }
    // 接收一個檔案路徑的集合
    function dowmurls(fileUrls) {
        return new Promise((resolve, reject) => {
            if (fileUrls.length > 0) {
                const zip = new JSZip();
                const cache = {};
                const downAll = [];
                // 錯誤檔案
                const errlist = [];
                for (let key in fileUrls) {
                    const promise = getFile(fileUrls[key].url).then(data => {
                        // 成功的檔案
                        if (data !== "downerr") {
                            // 獲取檔名
                            const file_name = fileUrls[key].name;
                            // 逐個新增檔案
                            zip.file(file_name, data, {
                                binary: true
                            });
                            // 儲存檔案
                            cache[file_name] = data;
                        } else {
                            // 儲存錯誤檔案
                            errlist.push(fileUrls[key])
                        }
                    })
                    // 儲存所有的檔案
                    downAll.push(promise)
                }
                // 統一下載
                Promise.all(downAll).then(() => {
                    // 生成二進位制流
                    zip.generateAsync({
                        type: "blob"
                    }).then(content => {
                        // 封裝的返回檔案
                        let resData = {
                            // 狀態碼
                            code: "success",
                            // 存放錯誤檔案資料
                            errUrls: [],
                            // 檔案流資料
                            content: null,
                        }
                        // 判斷是否存在錯誤檔案                        
                        resData.errUrls = errlist.length > 0 ? errlist : []
                        // 判斷錯誤檔案的個數是否等於要下載的檔案個數
                        errlist.length !== fileUrls.length ? resData.content = content : resData.code = "error"
                        // 返回下載結果資訊
                        resolve(resData);
                    })
                })
            }
        })
    }
    // 根據檔案路徑獲取這個檔案的檔案流
    function getFile(url) {
        return new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            // 設定響應型別為ArrayBuffer物件，目的是讓JSZip正確識別並下載
            xhr.responseType = 'arraybuffer';
            xhr.onreadystatechange = function (e) {
                // 判斷獲取檔案的狀態，非200時為獲取異常，返回錯誤碼
                if (e.target.status === 200) {
                    // 直接返回arraybuffer格式的檔案
                    if (xhr.response) {
                        resolve(xhr.response);
                    }
                } else {
                    resolve("downerr");
                }
            }
            xhr.send();
        })
    };
</script>
</html>