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 }) },