應(yīng)用場景

image.png

點(diǎn)擊下載輕量化后文件，后臺返回的地址是一個存在阿里云的鏈接地址，這邊直接用瀏覽器下載后，是一個zip的壓縮文件

image.png

image.png

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

實(shí)現(xiàn)方法

安裝jszip

npm install jszip

點(diǎn)擊下載按鈕，先去阿里云讀取zip的文件信息

     this.$axios({
              method: 'get',
              responseType: 'blob',
              url: fileUrl  // 文件所在阿里云的鏈接地址
            }).then(res => {
              // 把blob格式文件轉(zhuǎn)成FIle類型
              let files = new window.File([res.data], fileName, {type: 'zip'})
              // 讀取zip壓縮文件里面的文件內(nèi)容
              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

這世上本沒有路，踩的坑多了，也變成了路