前端批量下载文件打包为zip

多文件需要一次性下载为zip文件

这是近期遇到的一个需求，本身是多文件上传的，下载时单个下载太慢又繁杂，用户希望能一次性批量下载，就选择了jszip

import axios from "axios"
import JSZip from "jszip"
import FileSaver from "file-saver"

const getFile = url => {
    return new Promise((resolve, reject) => {
        axios({
            headers: {
                'Cache-control': 'no-cache'
            },
            method: "get",
            url,
            responseType: "arraybuffer"
        })
            .then(data => {
                resolve(data.data)
            })
            .catch(error => {
                reject(error)
            })
    })
}

const downloadFromAliOss = function (fileArr, zipName) {
    const zip = new JSZip()
    const promises = []
    fileArr.forEach(item => {
        const promise = getFile(item.url).then(data => {
            const url = new URL(item.url)
            // 获取文件类型
            // const type = url.pathname.split('.').pop() // 'jpg'
            // const typeArr = item.url.split(".")
            // const type = typeArr[typeArr.length - 1]
            // 默认文件名·
            // const nameArr = item.url.split("/")
            const name = item.name || url.pathname.split('/').pop()
            // const foldPath = item.foldPath || ""
            zip.file(name, data, {
                binary: true
            })
        })
        promises.push(promise)
    })

    Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
            FileSaver.saveAs(content, zipName || `文件.zip`)
        })
    })
}

export default downloadFromAliOss

调用

downloadalioss(signedFileList, '附件.zip')