在WEB開發(fā)中,有時候需要實現(xiàn)后端生成Excel文件并提供下載的功能。如果你使用Vue作為前端框架,可以通過Ajax請求獲取Excel文件流,然后將其轉(zhuǎn)換成Blob對象并使用URL.createObjectURL創(chuàng)建URL,最終通過a標(biāo)簽的download屬性實現(xiàn)下載功能。
首先,我們需要后端提供一個接口,用于生成Excel文件流。這里我們以Java為例,使用Apache POI工具類來生成Excel文件。下面是一個簡單的示例代碼,用途是生成一個包含姓名、年齡、手機(jī)號的Excel表格:
@RequestMapping(value = "/export", method = RequestMethod.GET) @ResponseBody public void export(HttpServletResponse response) throws IOException { // 初始化工作簿 Workbook workbook = new XSSFWorkbook(); Sheet sheet = workbook.createSheet("Sheet1"); // 創(chuàng)建表頭 Row header = sheet.createRow(0); header.createCell(0).setCellValue("姓名"); header.createCell(1).setCellValue("年齡"); header.createCell(2).setCellValue("手機(jī)號"); // 插入數(shù)據(jù) ListuserList = userService.findAllUsers(); for (int i = 0; i< userList.size(); i++) { Row row = sheet.createRow(i+1); User user = userList.get(i); row.createCell(0).setCellValue(user.getName()); row.createCell(1).setCellValue(user.getAge()); row.createCell(2).setCellValue(user.getMobile()); } // 設(shè)置響應(yīng)頭 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setHeader("Content-disposition", "attachment;filename=users.xlsx"); // 將工作簿寫入響應(yīng)流 workbook.write(response.getOutputStream()); workbook.close(); }
上述代碼中,@RequestMapping注解用來指定接口路徑與請求方法;Workbook和Sheet用于創(chuàng)建工作簿和Excel表格;Row和Cell用于插入數(shù)據(jù)。最后設(shè)置響應(yīng)頭和將工作簿寫入響應(yīng)流即可。
接下來,在前端代碼中發(fā)起Ajax請求,并在成功回調(diào)中將Excel文件流轉(zhuǎn)換成Blob對象,并使用URL.createObjectURL創(chuàng)建URL。代碼如下:
axios({ url: '/api/export', method: 'GET', responseType: 'blob' }) .then(res =>{ const url = URL.createObjectURL(res.data); const link = document.createElement('a'); link.href = url; link.download = 'users.xlsx'; link.click(); URL.revokeObjectURL(url); }) .catch(error =>{ console.log(error); })
這里我們使用axios庫發(fā)起GET請求,并將responseType設(shè)置為blob,以獲取Excel文件流。在成功回調(diào)中,使用URL.createObjectURL創(chuàng)建URL,并創(chuàng)建一個a標(biāo)簽,設(shè)置href為URL,download為文件名,然后模擬點擊a標(biāo)簽觸發(fā)下載,最后使用URL.revokeObjectURL釋放URL即可。
需要注意的是,如果導(dǎo)出的Excel文件過大,可能會導(dǎo)致內(nèi)存消耗過大或瀏覽器無響應(yīng)。這時候可以考慮分段導(dǎo)出,即將數(shù)據(jù)分成多個部分生成不同的Excel文件,最終合并為一個完整的文件。具體實現(xiàn)可參考這篇文章。
以上是使用Vue下載后端Excel文件的基本實現(xiàn)方法。總體來說,不論是后端生成Excel還是前端下載處理,我們都需要了解Excel文件的結(jié)構(gòu)和常用操作,才能更好地實現(xiàn)定制化的需求。