如何实现后端返回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);
  //将签名和时间戳，添加在请求接口 Header
  let signHeader = {"X-Sign": sign,"X-TIMESTAMP": signMd5Utils.getDateTimeToString()};

  return axios({
    url: url,
    method:'post' ,
    params: parameter,
    headers: signHeader,
    responseType: 'blob'
  })
}

调用导出方法，发送请求

//导出下载excel文件
handleExportXls() {
      this.loading = true
      postExcelExport(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 = url
            link.setAttribute('download', '文件名' + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
          }
        })
        .finally(() => {
          this.loading = false
        })
    },