vue前後端分離導出excel

文章目錄

• 前後端分離導出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的關鍵代碼了