vue调用接口导出excel功能及前端导出excel

接口导出excel

HTML

<el-button class="filter-item customise-primary-btn" style="margin-left: 10px;" type="primary" icon="el-icon-download" @click="downLoadData" :loading="downLoading">导出数据</el-button>

JS

  
/**
 * excelTemplateByDeviceData
 * excel导出原始能耗数据
 * @param buildId
 */
export function excelTemplateByEnergyData({
  buildId,
  energyItemCode,
  endTime,
  startTime
}) {
  return request({
    url: `/energy-data-management/energy/excelTemplateByEnergyData`,
    method: 'post',
    params: {
      buildId:buildId,
      energyItemCode:energyItemCode,
      endTime:endTime,
      startTime:startTime
    },
    responseType: 'blob'
  })
}

import { excelTemplateByDeviceData } from '@/api/data-management'
downQuery: {
   buildId: '',
   deviceId: '',
   startTime: '',
   endTime: ''
},
downLoading:false,

downLoadData() {
    this.downLoading = true
    let current = new Date()
    let today = current.getFullYear() + (current.getMonth() + 1).toString().padStart(2,'0') + current.getDate().toString().padStart(2,'0')
    excelTemplateByDeviceData(this.downQuery).then(res => {
      let blob = new Blob([res],{ type: "chunked" });
      let downloadLink = document.createElement("a");
      const URL = window.URL || window.webkitURL || window.moxURL;
      let downUrl = URL.createObjectURL(blob);
      downloadLink.href = downUrl;
      downloadLink.download = "上传仪表数据_" + this.downBuildName + '_' + today + ".xlsx";
      downloadLink.click();
      window.URL.revokeObjectUR