vue项目下载zip压缩包

直接上代码

1.请求后端接口

//必须加上responseType，因为下载的zip属于流和普通的下载方式还是有较大区别的，同时headers也需要设置一下，不然是下载不了。
export function loadLabel(query) {
  return request({
    url: '/express/admin/loadLabel',
    method: 'get',
    params: query,
    responseType: 'blob',
    headers:{ 'Content-Type': 'application/json; application/octet-stream'},
  })
}

2.HTML

<el-button
    size="mini"
    type="text"
    icon="el-icon-download"
    @click="handleIndent(scope.row)"
    v-hasPermi="['express:result:export']">
      下载失败订单
</el-button>

3.JS

  //下载面单封装方法
    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) // 释放内存
    },
    /** 下载面单 */
    handleSheet(row){
      this.queryParams.parentId=row.id,
      this.queryParams.statusCode=200
      this.$confirm('是否确认下载成功的面单嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading1= this.$loading({
          lock: true,
          text: '正在下载，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        loadLabel(this.queryParams).then(res => {
          loading1.close();
          this.fileHandle(res,'面单.zip')
        })
      }).catch(() => {
      });
    },

当然也可以不用封装的方法

 handleSheet(row){
      this.queryParams.parentId=row.id,
      this.queryParams.statusCode=200
      const queryparmas=this.queryParams
      this.$confirm("是否确认导出所有数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function() {
        return loadLabel(queryparmas);
      }).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 = '面单.zip' // 重命名文件
        link.click()
        URL.revokeObjectURL(url) // 释放内存
      }).catch(function(err) {
        console.log(err)
      });
    },

以上两种形式的代码就能实现zip下载