如何实现后端返回excel文件，在前端下载功能

前言

简单记录一下，excel文件导出下载功能

一、后端接口返回excel文件

把自己生成的workbook 以文件流的方式，返回前台

Workbook workbook = employeeConfirmationDefectService.exportPoorPolishExcel(budatBegin, budatEnd, queryWrapper);//传输到前端下载try {response.setHeader("content-Type", "application/vnd.ms-excel");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("抛光不良记录.xlsx", "UTF-8"));workbook.write(response.getOutputStream());workbook.close();} catch (IOException e) {throw new RuntimeException(e);}

二、前端接受文件流，下载文件

发送post请求，设定responseType: ‘blob’，指定响应数据为文件对象

export function postExcelExport(url,parameter) {let sign = signMd5Utils.getSign(url, parameter);//将签名和时间戳，添加在请求接口 Headerlet signHeader = {"X-Sign": sign,"X-TIMESTAMP": signMd5Utils.getDateTimeToString()};return axios({url: url,method:'post' ,params: parameter,headers: signHeader,responseType: 'blob'})
}

调用导出方法，发送请求

//导出下载excel文件
handleExportXls() {this.loading = truepostExcelExport(this.url.export, this.queryParam).then((data) => {console.log(data)if (!data) {this.$message.warning('文件下载失败')return}if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel;charset=utf8' }),'文件名' + '.xls')} else {let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel;charset=utf8' }))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', '文件名' + '.xls')document.body.appendChild(link)link.click()document.body.removeChild(link) //下载完成移除元素window.URL.revokeObjectURL(url) //释放掉blob对象}}).finally(() => {this.loading = false})},