vue 项目中 zip 压缩包文件下载

vue 项目中 zip 压缩包文件下载

参考文章@胡新fa ①文件下载流程
参考文章@Mr.裴 ②压缩包下载打不开问题
參考文章@sqwu

注意 : 一定要在接口中配置 responseType:‘blob’ 该属性; headers 根据需求添加.
{
responseType: ‘blob’,
headers: { ‘request-module’: ‘app_info’ }
}

a标签下载相关知识：

• 参考文章@GQguoqi

大佬代码:

//必须加上responseType，因为下载的zip属于流和普通的下载方式还是有较大区别的
export function Export(data) {
    return request({
        url: '',
        method: '',
        responseType: 'blob', //必须在接口中配置 responseType 属性.
        headers:{ 'Content-Type': 'application/json; application/octet-stream'},
        data: data
    })
}

<!--第一步 --!>
<sapn @click='handleExport'>下载zip压缩包</span>
<!--第二步 --!>
import { getApplyInfoExport } from  ''
<!--第三步 --!>
   handleExport() {
      let data = ''
      this.$confirm("是否确认导出所有数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function() {
          return getApplyInfoExport(data);
        }).then(response => {
          let blob = new Blob([response.data], {type: 'application/zip'})
          let url = window.URL.createObjectURL(blob)
          const link = document.createElement('a') // 创建a标签
          link.href = url
          link.download = '' // 重命名文件
          link.click()
          URL.revokeObjectURL(url) // 释放内存
        }).catch(function(err) {
          console.log(err)
        });
    },

我根据大佬的代码  封装了一个 api:
fileHandle(data, fileName) {
      let blob = new Blob([data], { type: 'application/zip' })
      let url = window.URL.createObjectURL(blob)
      const link = document.createElement('a') // 创建a标签
      link.href = url
      link.download = fileName // 重命名文件
      link.click()
      URL.revokeObjectURL(url) // 释放内存
    }

使用时调用:
//点击事件
downLoadHandle() {
		//后端给的压缩包接口
      zipDownLoad().then(res => {
      		//大佬封装的方法
          this.fileHandle(res.data,"资产标签卡.zip")
      })
    },

下载文件后处理content-disposition，响应fileName。

下面方法可能会获取不到 content-disposition 字段，解决办法参考下面文章。

• 参考文章@GQguoqi

//前端可以这样获取 content-disposition 字段，然后加以处理。
    axois.get().then(res => {
      let filename = res.headers['content-disposition']
        .split(';')[1]
        .split('filename=')[1]
    })

// 如果获取不到 content-disposition 字段  需要后端做以下配置。
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
response.setHeader("Content-Disposition","attachment;filename="+fileNameEncoder);
注意大小写，都是Content-Disposition，我之前一个大驼峰，一个全小写失败了。