在开发中遇到ZIP 压缩包文件下载的需求,在此记录一下。
我这里是有后端返回 ZIP 的流文件。才用了如下方法处理。

this.$api.gameApi.downloadZIP(this.gameInformation.id,row.id).then(res => {
      const blob = new Blob([res.data], {type: 'application/zip'})
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a') // 创建a标签
      link.href = url
      link.download = row.name // 重命名文件
      link.click()
      URL.revokeObjectURL(url) // 释放内存
  })

单纯这么使用,下载下来的压缩包打不开,需要对 axios 进行如下配置

 downloadZIP(id, bundlesId) {
    return $axios({
      methods: "get",
      url: `/v1/${id}/material/bundle/${bundlesId}`,
      responseType: 'blob'
    })
  },

添加: responseType: 'blob' 即可。


后续补充:
当后端提供下载地址的时候,前端可以直接下载。方法如下:
这里是使用 el-upload 组件提供的 :on-preview 方法。

handlePreview(file){
  const a = document.createElement('a');
  if (typeof a.download !== 'undefined') {
    a.href = file.url
    a.download = file.name
    document.body.appendChild(a);
    a.click();
    a.remove();
  }else {
    window.location = file.url
    // window.open(file.url)
  }
},

这是利用 a标签提供的download方法,实现下载功能的。
当判断浏览器不支持 download 方法时,可以调用 window.locationwindow.open 方法下载文件。
window.location 可以在当前页面下载。
window.open 将会打开新的窗口,进行下载。


A_Ghost
29 声望4 粉丝

知道的越多,不知道的也就越多。