這篇文章給大家分享的是有關(guān)ajax實(shí)現(xiàn)excel報(bào)表導(dǎo)出的方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊(cè)、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、水富網(wǎng)站維護(hù)、網(wǎng)站推廣。
利用ajax實(shí)現(xiàn)excel報(bào)表導(dǎo)出【解決亂碼問題】,供大家參考,具體內(nèi)容如下
背景
項(xiàng)目中遇到一個(gè)場景,要導(dǎo)出一個(gè)excel報(bào)表。由于需要token驗(yàn)證,所以不能用a標(biāo)簽;由于頁面復(fù)雜,所以不能使用表單提交。初步考慮前端使用ajax,后端返回流,定義指定的header。
第一版
主要代碼
前端
使用jquery的ajax
var queryParams = {"test":"xxx"}; var url = "xxx"; $.ajax({ type : "POST", //提交方式 url : url,//路徑 contentType: "application/json", data: JSON.stringify(queryParams), beforeSend: function (request) { request.setRequestHeader("Authorization", "xxx"); }, success : function(result) { const blob = new Blob([result], {type:"application/vnd.ms-excel"}); if(blob.size < 1) { alert('導(dǎo)出失敗,導(dǎo)出的內(nèi)容為空!'); return } if(window.navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, 'test.xls') } else { const aLink = document.createElement('a'); aLink.style.display = 'none'; aLink.href = window.URL.createObjectURL(blob); aLink.download = 'test.xls'; document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); } } });
后端
使用easypoi(如何使用easypoi請(qǐng)自行百度)
import cn.afterturn.easypoi.excel.ExcelExportUtil; import cn.afterturn.easypoi.excel.entity.ExportParams; @PostMapping(value = "/download") public void downloadList(@RequestBody Objct obj, HttpServletResponse response) { ...... List<Custom> excelList = new ArrayList<>(); // excel總體設(shè)置 ExportParams exportParams = new ExportParams(); // 指定sheet名字 exportParams.setSheetName("test"); Workbook workbook = ExcelExportUtil.exportExcel(exportParams, Custom.class, excelList); response.setContentType("application/vnd.ms-excel"); response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("test", "utf-8") + ".xls"); OutputStream outputStream = response.getOutputStream(); workbook.write(outputStream); outputStream.flush(); outputStream.close(); ...... }
測試結(jié)果
excel能正常導(dǎo)出,但下載下來的excel全是亂碼。經(jīng)過各種找答案,整理了一下可能是以下原因?qū)е拢?/p>
1、后端未設(shè)置字符集,或者在spring框架的過濾器中統(tǒng)一設(shè)置了字符集;
2、前端頁面未設(shè)置字符集編碼;
3、需要在ajax中添加 request.responseType = “arraybuffer”;
經(jīng)過不斷測試,我的應(yīng)該是第三點(diǎn)導(dǎo)致。但在jquery ajax 中添加后仍然不起作用,亂碼問題始終無法解決。
第二版
主要代碼
前端,使用原生的ajax。后端未變動(dòng)。
var xhr = new XMLHttpRequest(); xhr.responseType = "arraybuffer"; xhr.open("POST", url, true); xhr.onload = function () { const blob = new Blob([this.response], {type:"application/vnd.ms-excel"}); if(blob.size < 1) { alert('導(dǎo)出失敗,導(dǎo)出的內(nèi)容為空!'); return; } if(window.navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, 'test.xls') } else { const aLink = document.createElement('a'); aLink.style.display = 'none'; aLink.href = window.URL.createObjectURL(blob); aLink.download = 'testxls'; document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); return; } } xhr.setRequestHeader("Authorization", "xxx"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify(queryParams));
測試結(jié)果
下載的excel不再亂碼,原生ajax中使用 “arraybuffer” 使用是生效的。
感謝各位的閱讀!關(guān)于ajax實(shí)現(xiàn)excel報(bào)表導(dǎo)出的方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
新聞名稱:ajax實(shí)現(xiàn)excel報(bào)表導(dǎo)出的方法
分享網(wǎng)址:http://bm7419.com/article12/jcipgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、軟件開發(fā)、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)