前端vue项目下载zip压缩包及附加

这是一个非常常见的业务常见，话不多说直接撸！！！

封装写一个请求后端接口的方法，具体可根据项目视情况而变---你的组件方法

//这里非常有必要说明一下，必须加上responseType，因为下载的zip属于流和普通的下载方式还是有较大区别的，同时headers也需要设置一下，不然是下载不了。
export function Export(data) {
    return request({
        url: '',
        method: '',
        responseType: 'blob',
        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)
        });
    },