vue-element-admin后台返回数据流导出Excel

vue-element-admin后台返回文件流导出Excel, 自用!

原因: 项目导出有表格合并,后台做的处理,但是返回的是文件流 数据流

 

 

参考

html

  <el-button type="primary" @click="handleExportExcel">导出</el-button>

 

api

// 采购管理
import request from "@/utils/request";

// 采购管理 - 采购订单列表页 - 导出接口
export function exportExcel(data) {
  return request({
    url: "/purchase/order/export",
    method: "get",
    params: data,
    responseType:'blob'
  });
}

　　

js

 // 导出数据
    handleExportExcel(){
      this.loading = true
      // 接口多选 要的字符串 数组字符串需要来回转换
      this.searchForm.status = this.orderStatus.join(",");
      const param = Object.assign({}, this.searchForm);
      // console.log(param);
      // 接口获取数据
      Api.exportExcel(param)
        .then(res => {
          this.loading = false
          // const { code, data, msg, total } = res.data
          const aLink = document.createElement("a");
          let blob = new Blob([res], {type: "application/vnd.ms-excel"});
          aLink.href = URL.createObjectURL(blob);
          // 导出数据名称 带日期形式模板是"20201007-20210501采购订单"  如果把2020-10-07转化为20201007 转化方法replace(/[-]/g,"")
          aLink.setAttribute('download',this.searchForm.date_from.replace(/[-]/g,"") +'-'+this.searchForm.date_to.replace(/[-]/g,"") +'采购订单' + '.xlsx') ;

          aLink.click()
          this.$refs.loadElement.appendChild(aLink)
        }).catch(error => {
          this.loading = false
        })
    },