Vue中调用后台接口获取数据流实现excel下载

今天晚上代码上线，已测试通过，抽时间整理一下。

点击页面有loading特效，axios设置超时时间请求头。

一：页面展示

使用element组件

二代码：

跳转页面：

<template>
  <el-tabs :tab-position="tabPosition" style="height: 100%; width: 100%">
    <el-tab-pane label="报表统计下载" style="font-size: 10px">
      <ReportExport></ReportExport>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import ReportExport from '../jd/reportexportmenue.vue';
export default {
  data() {
    return {
      tabPosition: 'left'
    };
  },
  components: {
    ReportExport
  }
};
</script>

 跳转的tab页面：

<template>
  <div>
    <div class="block">
      <span class="demonstration">请输入需要的报表时间区间</span>
      <el-date-picker
        size="mini"
        v-model="value1"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
      >
      </el-date-picker>
    </div>
    <el-form :inline="true" style="width: 850px">
      <el-form-item size="small">
        <el-button size="small" @click="reportPolicy" :loading="ConfirmLoading"
          >出单情况统计</el-button
        >
        <el-button
          size="small"
          @click="reportRetryPolicy"
          :loading="ConfirmLoading2"
          >失败重试成功单号统计</el-button
        >
        <el-button
          size="small"
          @click="reporyFailedPolicy"
          :loading="ConfirmLoading3"
          >失败单号统计</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios';
import session from '../../common/session.js';
export default {
  data() {
    return {
      reportPolicyFilename: '出单情况统计',
      reportRetryPolicyFilename: '失败重试成功单号统计',
      reporyFailedPolicyFilename: '失败单号统计',
      value1: '',
      ConfirmLoading: false,
      ConfirmLoading2: false,
      ConfirmLoading3: false
    };
  },
  methods: {
    dateDiff(dateEnd, dateStart) {
      let aDate, oDate1, oDate2, iDays;
      dateEnd = dateEnd.split(' ');
      aDate = dateEnd[0].split('-');
      oDate1 = new Date(aDate[0], aDate[1], aDate[2]);
      dateStart = dateStart.split(' ');
      aDate = dateStart[0].split('-');
      oDate2 = new Date(aDate[0], aDate[1], aDate[2]);
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
      return iDays;
    },
    reportPolicy() {
      if (this.value1 === '') {
        this.$alert('请选择日期区间,可为同一天', '提示');
        return;
      }
      if (this.dateDiff(this.value1[1], this.value1[0]) > 7) {
        this.$alert('一次查询的日期天数最好在七天之内', '提示');
        return;
      }
      this.ConfirmLoading = true;
      axios({
        method: 'get',
        url: 'api/jd/jdreportPolicy?date=' + this.value1,
        responseType: 'blob',
        headers: {
          'X-IDP-Token': session.getToken()
        },

        timeout: 60000
      })
        .then((res) => {
          const link = document.createElement('a');
          const blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel'
          });
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', '出单情况统计' + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.ConfirmLoading = false;
        })
        .catch((error) => {
          this.ConfirmLoading = false;
          this.$alert('处理失败,请稍后重试', '提示');
          console.error(error);
        });
    },
    reportRetryPolicy() {
      if (this.value1 === '') {
        this.$alert('请选择日期区间,可为同一天', '提示');
        return;
      }
      if (this.dateDiff(this.value1[1], this.value1[0]) > 7) {
        this.$alert('一次查询的日期天数最好在七天之内', '提示');
        return;
      }
      this.ConfirmLoading2 = true;
      axios({
        method: 'get',
        url: 'api/jd/reportRetryPolicy?date=' + this.value1,
        responseType: 'blob',
        headers: {
          'X-IDP-Token': session.getToken()
        },
        timeout: 60000
      })
        .then((res) => {
          const link = document.createElement('a');
          const blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel'
          });
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', '失败重试成功单号统计' + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.ConfirmLoading2 = false;
        })
        .catch((error) => {
          this.ConfirmLoading2 = false;
          this.$alert('处理失败,请稍后重试', '提示');
          console.error(error);
        });
    },
    reporyFailedPolicy() {
      if (this.value1 === '') {
        this.$alert('请选择日期区间,可为同一天', '提示');
        return;
      }
      if (this.dateDiff(this.value1[1], this.value1[0]) > 7) {
        this.$alert('一次查询的日期天数最好在七天之内', '提示');
        return;
      }
      this.ConfirmLoading3 = true;
      axios({
        method: 'get',
        url: 'api/jd/reporyFailedPolicy?date=' + this.value1,
        responseType: 'blob',
        headers: {
          'X-IDP-Token': session.getToken()
        },
        timeout: 60000
      })
        .then((res) => {
          const link = document.createElement('a');
          const blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel'
          });
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', '失败单号统计' + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.ConfirmLoading3 = false;
        })
        .catch((error) => {
          this.ConfirmLoading3 = false;
          this.$alert('处理失败,请稍后重试', '提示');
          console.error(error);
        });
    }
  }
};
</script>

后端代码：只列其中一个吧。

@GetMapping("/reportRetryPolicy")
    public Result<String> getReportRetryPolicy(@RequestParam("date") String[] date, HttpServletResponse response,@RequestAttribute(Constants.HTTP_ATT_NS) Integer nsid){
       List<DictVO> log_type = this.dictService.getDictMapByRef(nsid, Arrays.asList("log_type"));
        DictVO dictVO = log_type.get(0);
        XSSFWorkbook workbook=null;
        try (DbUse db = new DbUse("ws")) {
            List<TWorkdata> tWorkdata = workDataService.selectFailedRetrySuccess(date);
             workbook = generatorExcelService.getReportRetryFailedPolicySuccess(tWorkdata,dictVO);
        }
        try (OutputStream out= response.getOutputStream();){
            response.reset();
            response.addHeader("Content-Disposition", "attachment; filename=" + "失败重试成功单号统计" + ".xlsx");
//            response.setContentType("application/vnd.ms-excel;charset=utf-8");
            workbook.write(out);
            out.flush();
        } catch (Exception e) {
            e.printStackTrace();
            return Result.create("No");
        }
        return Result.create("Yes");
    }

maven依赖：

<!-- easypoi 导入导出插件-->
		<dependency>
			<groupId>cn.afterturn</groupId>
			<artifactId>easypoi-base</artifactId>
			<version>3.0.3</version>
		</dependency>
		<dependency>
			<groupId>cn.afterturn</groupId>
			<artifactId>easypoi-web</artifactId>
			<version>3.0.3</version>
		</dependency>
		<dependency>
			<groupId>cn.afterturn</groupId>
			<artifactId>easypoi-annotation</artifactId>
			<version>3.0.3</version>
		</dependency>