前端打包下载

本文代码以图片作为示例，进行文件批量下载

安装 axios，FileSaver，JSZip 三个插件
初始化 new JSZip
获取所有图片链接，并根据链接利用 axios 进行数据获取，blob 格式
每条数据获取成功后，利用 zip.file 保存起来，参数是文件名、文件数据，数据格式
所有数据都获取成功后，利用 zip.generateAsync 生成最终数据
数据生成成功后，利用 FileSaver.saveAs 保存数据，并设置压缩包名称

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

downAll: function () {
            let that = this
            const promises = []
            let zip = new JSZip();
            let downLinkArr = document.querySelectorAll('.downLink')
            let arr = []
            downLinkArr.forEach(item => {
                arr.push(item.href)
            })
            arr.map(item => {
                console.log(decodeURI(item)
                let item_ = decodeURI(item)
                let name = item_.split('/')
                let name_ = name[name.length - 1]
                console.log(name_);
                const promise = that.getFile(item).then(res => {
                    zip.file(`${name_}`, res, {binary: true})
                }).catch(() => {
                    this.$message.error('下载错误，请重新下载')
                })
                promises.push(promise)
            })
            Promise.all(promises).then(() => {
                zip.generateAsync({type: 'blob'}).then(res => {
                    FileSaver.saveAs(res, new Date().getTime()
                }).catch(() => {
                    this.$message.error('下载错误，请重新下载~')
                })
            })

        },
getFile(url) {
            return new Promise((resolve, reject) => {
                axios({
                    method: 'get',
                    url: `${url}`,
                    responseType: 'blob',
                })
                    .then((response) => {
                        resolve(response.data)
                    })
                    .catch((error) => {
                        reject(error.toString()
                    })
            })
        },