您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何解決Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel的問(wèn)題,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
導(dǎo)出Excel功能
這里不談別人怎么實(shí)現(xiàn)的,我是從后臺(tái)生成了Excel流文件返回給前端的。
下面具體看一下后臺(tái)的代碼:
/** * 批量導(dǎo)出用戶 * @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", "郵箱賬號(hào)","昵稱","年齡","性別","狀態(tài)", "注冊(cè)時(shí)間"}; 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(); }
對(duì)于第一個(gè)函數(shù)exportUser
來(lái)說(shuō),主要是根據(jù)傳回來(lái)的條件查詢數(shù)據(jù)庫(kù)并生成相應(yīng)的Excel表格,之后book.write(generateResponseExcel(“用戶列表”,response)); 這行代碼調(diào)用第二個(gè)函數(shù)generateResponseExcel
來(lái)生成流文件以及處理返回的Response。
這里需要注意的地方就兩個(gè):
response.setContentType("application/vnd.ms-excel;charset=utf-8"); response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx");
第一行application/vnd.ms-excel說(shuō)明將結(jié)果導(dǎo)出為Excel
第二行說(shuō)明提供那個(gè)打開(kāi)/保存對(duì)話框,將文件作為附件下載
上面就是后臺(tái)的全部代碼了,接下來(lái)看一下前端的代碼:
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: '錯(cuò)誤', desc: '網(wǎng)絡(luò)連接錯(cuò)誤' }) console.log(error) })
這里為了方便做記錄,我是直接在頁(yè)面中使用axios發(fā)送了個(gè)post請(qǐng)求。
仔細(xì)看axios請(qǐng)求加了個(gè)responseType: 'blob'
配置,這是很重要的
可以看一下請(qǐng)求成功之后返回的數(shù)據(jù):
可以看到請(qǐng)求返回了一個(gè)Blob對(duì)象,你如果沒(méi)有正確的加上responseType: 'blob'這個(gè)參數(shù),返回的就不是個(gè)Blob對(duì)象,而是字符串了。
接下來(lái)就是將返回的Blob對(duì)象下載下來(lái)了:
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: ‘a(chǎn)pplication/vnd.ms-excel'});
其余的看看就行了。
以上就是全部的Vue導(dǎo)出Excel前后端代碼了。
導(dǎo)入Excel功能
其實(shí)對(duì)于這個(gè)導(dǎo)入Excel沒(méi)有什么好說(shuō)的,就和你沒(méi)采用前后分離時(shí)使用SpringMVC導(dǎo)入Excel表格一樣。Vue前端導(dǎo)入Excel代碼和Vue上傳圖片的代碼沒(méi)有區(qū)別,就是將Excel文件傳到后臺(tái),之后就是后臺(tái)處理文件的邏輯了,這個(gè)就不具體寫了,因?yàn)楹鸵郧皼](méi)區(qū)別。
關(guān)于“如何解決Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel的問(wèn)題”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。