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

关注

原创最新推荐文章于 2025-11-11 09:47:38 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

vue+JSZip+FileSaver批量压缩下载文件需要的功能是批量下载并压缩xlsx文件，后端传给我的数据是下载链接。网络上搜索到的都是用promise解决异步获取文件的问题，但是我使用时候会出现文件错乱互相覆盖（原因是啥我也没研究明白），导致下载的文件名对，文件内容不对的诡异情况，研究过后只能轮询转化，即一次转换文件成功后再重新循环转化。触发downloadBtn方法，就可以下载statementList存放的数据了。首先是依赖包的下载，用到的是JSZip和FileSaver。获取到数据以后拼成可用的数据源，然后调用方法。阅读详情

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('导出失败')
  })
}

收录于