vue前端 结合 jszip，file-saver打包下载zip文件

这种打包下载文件，如果后端并没有返回arraybuffer文件格式数据，其实不太建议在前端做，因为前端用url来进行打包下载，还需要再另行发起请求。

总之是可以实现的，我们只需要借助jszip和file-saver插件即可

下面基于vue-cli创建的项目来说明，我们来看看如何实现。

让我们先在项目里安装依赖包

npm i jszip file-saver --save axios

第一种情况：直接下载文件数据

首先看第一种情况，后端直接给我们返回了zip文件格式的数据，那么这个就很简单了，在你需要下载的页面引入file-saver（jszip都用不上）请求后端数据，保存即可

直接看保存的代码,这里假设后端返回的文件格式是blob，前端以相应的格式接收，ids是后端需要的参数

async saveFile(){
 let fileData=await axios({
                    url:'/downloads',
                    withCredentials:false,
                    responseType:'blob',
                    data:ids,
                    method:'POST'
                })
                //fileData.data就是后端返回的文件数据
                saveAs.saveAs(fileData.data, `资料.zip`) // 利用file-saver保存文件
}

如果后端都返了文件数据却不是zip的，那请他返zip的吧，前端就懒得麻烦了哦

第二种情况：只有文件Url

这种情况，我们只有一个可以访问的文件Url,那么就要多一步，先请求下这个文件，转为接收blob或者arraybuffer，然后用jszip转为zip文件，再用file-saver保存。这种情况需要请求接口，会受到浏览器并发限制。
这里来一个批量下载的示例

<template>
<button @click="downloadZip"></button>
</template>
<script>
export default{
data(){
return {
urlData:['url1','url2','url3','url4']
}
}, 
   methods: {
   //获取下载文件
         async getDowloadFile(url){
            return new Promise((resolve, reject) => {
                store.state.instance({
                    url,
                    withCredentials:false,
                    responseType:'arraybuffer'
                }).then(res=>{
                    resolve(res.data)
                }).catch(err=>{
                    reject(err)
                })
            })
        },
        //下载zip文件
        downloadZip(){
           // urlData// 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
           let {urlData}=this
           let name="打包下载"
            const zip = new JSZip()
            const cache = {}
            const promises = []
            urlData.forEach(item => {
                const promise = this.getDowloadFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
                    // console.log(data)
                    const arr_name = item.split("/")
                    const file_name = arr_name[arr_name.length - 1] // 获取文件名
                    zip.file(file_name, data, { binary: true }) // 逐个添加文件
                    cache[file_name] = data
                })
                promises.push(promise)
            })
            console.log(promises)
            Promise.all(promises).then(() => {
                zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                    saveAs.saveAs(content, `${name}.zip`) // 利用file-saver保存文件
                })
            })
        },
        }
}
</script>

第三种情况：打包json数据，或者字符串数据

假设我们想将页面上的某些json数据打包成json格式文件下载，那这也好办。看代码

          let testJson={
          name:"ZHANGSA",
          age:18,
          leval:2
          }
           zip.file('testJson.json', JSON.stringify(testJson), { binary: true }) // 逐个添加文件
           zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                  console.log(content)
                  saveAs.saveAs(content, `文件.zip`) // 利用file-saver保存文件
          })

标签：文件,vue,name,zip,saver,file,data
来源： https://blog.csdn.net/qq_41000974/article/details/110310817