Vue結合后臺導入導出Excel問題詳解

2019-11-19 12:07:10

字體：大中小

來源：轉載

供稿：網友

最近Vue項目中用到了導入導出功能，在網上搜索了一番之后，決定采用Blob方式，這也是大家推薦的一種的方式，特此做下記錄。

導出Excel功能

這里不談別人怎么實現的，我是從后臺生成了Excel流文件返回給前端的。

下面具體看一下后臺的代碼：

/**  * 批量導出用戶  * @param condition  * @param response  */@PostMapping("/exportUser")public void exportUser(@RequestBody UserQueryCondition condition,HttpServletResponse response){ XSSFWorkbook book = new XSSFWorkbook(); try {  List<UserParam> list = indexService.exportUser(condition);  if (list != null && list.size() > 0) {   XSSFSheet sheet = book.createSheet("mySheent");   String[] vals = {"用戶ID", "郵箱賬號","昵稱","年齡","性別","狀態", "注冊時間"};   createExcel(sheet, 0, vals);   for (int i = 0; i < list.size(); i++) {    UserParam entity = list.get(i);    String[] vals2 = new String[]{String.valueOf(entity.getId()), entity.getEmail(), entity.getName(), String.valueOf(entity.getAge()),            entity.getSex() == 0 ? "女":"男",entity.getRemoved() == 0 ? "啟用":"禁用",entity.getRegisterDate()};    createExcel(sheet, i + 1, vals2);   }   book.write(generateResponseExcel("用戶列表",response));  }  book.close(); }catch(Exception e){  e.printStackTrace(); }}

/**  * @param excelName  *   要生成的文件名字  * @return  * @throws IOException  */private ServletOutputStream generateResponseExcel(String excelName, HttpServletResponse response) throws IOException { excelName = excelName == null || "".equals(excelName) ? "excel" : URLEncoder.encode(excelName, "UTF-8"); response.setContentType("application/vnd.ms-excel;charset=utf-8"); response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx"); return response.getOutputStream();}

對于第一個函數exportUser來說，主要是根據傳回來的條件查詢數據庫并生成相應的Excel表格，之后book.write(generateResponseExcel(“用戶列表”,response)); 這行代碼調用第二個函數generateResponseExcel來生成流文件以及處理返回的Response。

這里需要注意的地方就兩個：

response.setContentType("application/vnd.ms-excel;charset=utf-8");response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx");

第一行application/vnd.ms-excel說明將結果導出為Excel

第二行說明提供那個打開/保存對話框，將文件作為附件下載

上面就是后臺的全部代碼了，接下來看一下前端的代碼：

axios({  method: 'post',  url: 'http://localhost:19090/exportUser',  data: {   email: this.email,   userIdArray: this.userIdArray,   startRegisterDate: this.registerStartTime,   endRegisterDate: this.registerEndTime  },  responseType: 'blob'  }).then((res) => {  console.log(res)  const link = document.createElement('a')  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});  link.style.display = 'none'  link.href = URL.createObjectURL(blob);  let num = ''  for(let i=0;i < 10;i++){   num += Math.ceil(Math.random() * 10)  }  link.setAttribute('download', '用戶_' + num + '.xlsx')  document.body.appendChild(link)  link.click()  document.body.removeChild(link)  }).catch(error => {  this.$Notice.error({   title: '錯誤',   desc: '網絡連接錯誤'  })  console.log(error)  })

這里為了方便做記錄，我是直接在頁面中使用axios發送了個post請求。

仔細看axios請求加了個responseType: 'blob'配置，這是很重要的

可以看一下請求成功之后返回的數據：

可以看到請求返回了一個Blob對象，你如果沒有正確的加上responseType: 'blob'這個參數，返回的就不是個Blob對象，而是字符串了。

接下來就是將返回的Blob對象下載下來了：

 const link = document.createElement('a')  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});  link.style.display = 'none'  link.href = URL.createObjectURL(blob);  let num = ''  for(let i=0;i < 10;i++){   num += Math.ceil(Math.random() * 10)  }  link.setAttribute('download', '用戶_' + num + '.xlsx')  document.body.appendChild(link)  link.click()  document.body.removeChild(link)

上面這段代碼重要的就一句：let blob = new Blob([res.data],{type: ‘application/vnd.ms-excel'});

其余的看看就行了。