vue导出文件并获取接口返回的错误信息

最新推荐文章于 2024-09-17 17:47:56 发布

范范_

最新推荐文章于 2024-09-17 17:47:56 发布

阅读量827

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40853132/article/details/126661896

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这段代码主要处理用户选择数据后的导出操作。如果选择的数据条数不是1，会给出警告。然后设置导出按钮的加载状态并调用导出接口。接口返回的响应根据类型判断是普通对象还是文件流，分别进行错误处理或文件下载。文件下载通过创建`a`标签并模拟点击实现。

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

  handleDownloadResult() {
      if (this.selectedRowKeys.length !== 1) {
        this.$message.warning('请选择一条数据进行导出');
      }
      // exportLoading 是导出按钮的loading
      this.exportLoading = true;
      // 导出接口的参数
      const exportParams = { analysisId: this.selectedRowKeys.join(',') };
      // 导出接口路径
      const path = baseUrl.schedule + '/opt/downloadResult'
      Axios.get(path , {
        params: exportParams,
        responseType: 'blob',
        headers: { 'Content-Type': 'application/zip' },
        data: true // get请求设置 Content-Type 不生效 ，加上 data:true  后生效
      })
        .then(res => {
          let data = res.data;
          let _self = this;
          let fileReader = new FileReader();
          fileReader.onload = function() {
            try {
              // JSON.parse解析对象成功，说明是普通对象数据，不是文件流
              let jsonData = JSON.parse(this.result); 
              if (jsonData.success === false) {
                // 接口返回的错误信息
                _self.$message.error(jsonData.msg); // 弹出的提示信息
              }
              _self.exportLoading = false;
            } catch (err) {
              // JSON.parse解析对象失败，说明是正常的文件流
              let a = document.createElement('a');
              let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
              let objUrl = URL.createObjectURL(blob);
              let contentDisposition = res.headers['content-disposition'];
              const fileName = window.decodeURI(contentDisposition.split('filename=')[1], 'UTF-8');
              a.setAttribute('href', objUrl);
              a.setAttribute('download', fileName);
              a.click();
              _self.exportLoading = false;
              a && document.body.removeChild(a);
            }
          };
          fileReader.readAsText(data); // 注意别落掉此代码，可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
        })
        .catch(err => {
          this.$message.error('下载失败');
          this.exportLoading = false;
        });
    },