一、HTML代碼

<el-col :xs="2" :md="2" :sm="3">
    <el-button type="primary" style="width:100%;" @click.stop="handleDownloadExecl">導 出</el-button>
</el-col>

二、JS代碼

// 根據查詢條件下載excel
handleDownloadExecl () {
  downloadDisabilityListExcelApi(this.searchForm).then(info => {
    if (!info) {
      
 
return
    }
    let url = window.URL.createObjectURL(info)
    let link = document.createElement(‘a‘)
    link.style.display = ‘none‘
    link.href = url
    link.setAttribute(‘id‘, ‘downloadLink‘)
    link.setAttribute(‘download‘, ‘殘疾人信息表.xls‘)
    document.body.appendChild(link)
    link.click()
    
 
// 刪除添加的a鏈接
    let objLink = document.getElementById(‘downloadLink‘)
    document.body.removeChild(objLink)
    // 釋放內存
    window.URL.revokeOjbectURL(url)
  })
}

三、axios的設置

export function downloadDisabilityListExcelApi (data) {
  return service({
    url: `/excel/excelDownloads`,
    method: ‘GET‘,
    params: data,
    responseType: 
 
‘blob‘
  })
}

後端根據查詢條件生成excel文件返回給前端，vue進行下載