vue + jsZip 实现解压文件并下载到本地

应用场景

image.png

点击下载轻量化后文件，后台返回的地址是一个存在阿里云的链接地址，这边直接用浏览器下载后，是一个zip的压缩文件

image.png

image.png

但是需求下载后是解压后的pbim文件，而不是zip，于是想到前端解压后，在下载到本地

实现方法

安装jszip

npm install jszip

点击下载按钮，先去阿里云读取zip的文件信息

     this.$axios({
              method: 'get',
              responseType: 'blob',
              url: fileUrl  // 文件所在阿里云的链接地址
            }).then(res => {
              // 把blob格式文件转成FIle类型
              let files = new window.File([res.data], fileName, {type: 'zip'})
              // 读取zip压缩文件里面的文件内容
              JSZip.loadAsync(files).then((zip) => {
                for (let key in zip.files) {
                // 用blob的格式读取，方便后面下载到本地
                  let base = zip.file(zip.files[key].name).async('blob')
                  base.then(res => {
                    this.doDownload(res, zip.files[key].name)
                  })
                }
              })
            })

下载到本地

doDownload (data, name) {
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', name)

        document.body.appendChild(link)
        link.click()
      }

下载成功

image.png

这世上本没有路，踩的坑多了，也变成了路