React引入jszip实现多个文件打包成zip下载

​​jszip文档​​ 安装两个插件

yarn add jszip file-saver

可直接复制查看效果

import JSZip from 'jszip'
import { saveAs } from 'file-saver'
export default () => {
    //通过请求获取文件blob格式
    function getFileBlob(url) {
        return new Promise((resolve,) => {
            let request = new XMLHttpRequest()
            request.open("GET", url, true)
            request.responseType = "blob"
            request.onload = (res) => {
                if (res.target.status == 200) {
                    resolve(res.target.response)
                } else {
                    reject(res)
                }
            }
            request.send()
        })
    }

    const downLoad = () => {
        const zip = new JSZip()
        let result = []
        let files = [
            "https://im-1305783521.cos.ap-guangzhou.myqcloud.com/im/file/C13012345678/1645261335302/测试文档.doc",
            "https://im-1305783521.cos.ap-guangzhou.myqcloud.com/im/file/lilinjian/1641631041478/dd.txt",
            "https://im-1305783521.cos.ap-guangzhou.myqcloud.com/im/file/C13012345678/1650420333942/123.xls",
            "https://im-1305783521.cos.ap-guangzhou.myqcloud.com/im/file/C13012345678/1641805597561/巴达兽.png"
        ]
        for (let i in files) {
            let promise = getFileBlob(files[i]).then((res) => {
                let format = files[i].substring(files[i].lastIndexOf("."), files[i].length)
                zip.file(i + format, res, { binary: true })
            })
            result.push(promise)
        }
        Promise.all(result).then(() => {
            zip.generateAsync({ type: "blob" }).then((res) => {
                saveAs(res, "文件.zip")
            })
        })
    }

    return (
        <button onClick={() => downLoad()}>下载多个文件</button>
    )
}