如何实现后端返回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){thrownewRuntimeException(e);}

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

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

exportfunctionpostExcelExport(url,parameter){let sign = signMd5Utils.getSign(url, parameter);//将签名和时间戳，添加在请求接口 Headerlet signHeader ={"X-Sign": sign,"X-TIMESTAMP": signMd5Utils.getDateTimeToString()};returnaxios({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(newBlob([data],{type:'application/vnd.ms-excel;charset=utf8'}),'文件名'+'.xls')}else{let url = window.URL.createObjectURL(newBlob([data],{type:'application/vnd.ms-excel;charset=utf8'}))let link = document.createElement('a')
            link.style.display ='none'
            link.href = url
            link.setAttribute('download','文件名'+'.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)//下载完成移除元素
            window.URL.revokeObjectURL(url)//释放掉blob对象}}).finally(()=>{this.loading =false})},