vue+iView实现下载zip文件导出多个excel表格

沐风拂千渔

已于 2023-11-10 15:17:13 修改

阅读量388

点赞数 1

分类专栏：功能 Vue React 文章标签： vue.js view design excel zip 导入与导出

于 2023-11-10 15:15:34 首次发布

本文链接：https://blog.csdn.net/weixin_44794123/article/details/134333082

版权

Vue 同时被 3 个专栏收录

44 篇文章 1 订阅

订阅专栏

功能

10 篇文章 0 订阅

订阅专栏

React

3 篇文章 0 订阅

订阅专栏

文章讲述了如何在Vue项目中实现点击按钮分月份导出Excel文件，并通过axios发送POST请求，使用FileReader处理响应数据，包括错误处理和文件下载。还提及了之前类似功能在iView和React+AntDesign中的实现。

摘要由CSDN通过智能技术生成

1，需求：在vue项目中，实现分月份导出多个Excel表格。

点击导出，下载zip文件，解压出多张表数据。

2，关键代码：

<Button  class="export button-style button-space" @click="exportDetail"  :disabled="isAllowed">导出</Button>

 this.downZips("/list/export", "导出", this.queryParam);

downZips(exportUrl, fileName, params) {
  this.isAllowed=true
  this.$axios
    .request({
      method: "post",
      url: exportUrl,
      data: params,
      responseType: "blob"
    })
    .then((res) => {
      let reader = new FileReader()
      reader.readAsText(res.data)
      reader.onload = () => {
        if (res.data.type === 'application/json') {
          this.isAllowed=false
          let resData = JSON.parse(reader.result)
          if (resData.code == 200005||resData.code == 200007) {
            this.$Message.error(resData.errorMsg)// 重复调用错误提示
            
          }
        } else {
          if (res.status === 200) {
              let fileName=  res.headers['content-disposition'].replace('attachment;filename*=',             '');
              let data = res.data;
              let blob = new Blob([data],{ type: " application/octet-stream" });
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement("a"); 
              link.href = url;
              if(fileName!=undefined){ 
              link.download = decodeURIComponent(fileName);
              }else{ 
              link.download = fileName
              }
              link.click();
              URL.revokeObjectURL(url);
              this.isAllowed=false
          } else {
            this.$Message.error('下载失败')
             this.isAllowed=false
          }
        }
      }

    })
    .catch((error) => {
      this.$Message.error(error);
       this.isAllowed=false
    });
},

3.效果
在这里插入图片描述