vue 使用jszip将多个文件压缩下载压缩包

最新推荐文章于 2025-01-26 20:36:23 发布

原创最新推荐文章于 2025-01-26 20:36:23 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 2 个专栏收录

33 篇文章

订阅专栏

24 篇文章

订阅专栏

该代码段展示了如何利用axios获取文件的blob数据，并使用jszip库将这些文件打包成zip文件进行下载。它首先将文件URL列表拆分，然后逐个请求每个文件，将响应的blob数据添加到zip文件中，最后生成zip并使用file-saver库保存到本地。

require('script-loader!file-saver');
import JSZip from 'jszip'
import axios from 'axios'
export async function downloadZip(files,zipname){
  const zip = new JSZip()
  let list = files?files.split(','):[]
  for(let i = 0;i<list.length;i++){
    let file = list[i]
    console.log(file)
    //将文件读取，返回blob
    await axios({
      method: 'get',
      url: file,
      responseType: 'blob' // 因为我们想要的是blob格式的二进制数据 所以responseType这么设置
    }).then(async res => {
      console.log(res)
      let filename = file.split('/')||[]
      filename = filename[filename.length-1]
        //加入zip
      zip.file(filename, res.data,{blob: true})
    }) 
  }
  zip.generateAsync({
    type: "blob"
  }).then((blob) => {
    saveAs(blob, `${zipname}.zip`)
  }, (err) => {
    alert('导出失败')
  })
}