vue前后端分离导出excel

前后端分离导出excel

前端相关代码

//request.js文件：
const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 6000 // 请求超时时间
})

//exportOrder.js文件：
export function exportOrders (parameter) {
  return request({
    url: userApi.OrderExport,
    method: 'get',
    responseType: 'blob', //此处需要添加blob类型
    params: parameter
  })
}

//order.vue文件：
<template>
	<a-button @click="exportOrder">导出订单</a-button>
</template>

exportOrder() {
      this.queryParam = {}
      exportOrders(this.queryParam)
        .then(res => {
          const link = document.createElement('a')
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = '导出订单.xlsx'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
        .catch(err => {
          console.log(err)
        })
},

上面代码注释行此处需要添加blob类型，是因为之前网上看过很多文章没有提到这一点导致虽然可以下载excel但是实际上导出的文件里面乱码，无法访问。

后端相关代码，后端使用java：

@GetMapping("/order/export")
@ApiOperation(value = "export order")
public void download(QueryRequestVO queryRequestVO, HttpServletResponse response) throws IOException {
    response.setContentType("application/vnd.ms-excel");
    response.setCharacterEncoding("utf-8");
    String fileName = URLEncoder.encode("导出订单", StandardCharsets.UTF_8);
    response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
    EasyExcelFactory.write(response.getOutputStream(), OrderExportVO.class).sheet("订单")
            .doWrite(orderService.export(queryRequestVO));
}

以上就是整个前后端分离导出excel的关键代码了