????上一篇寫了上傳文件，這一篇接著來一個下載導(dǎo)出的案例

????下載Excel文件的一個核心邏輯，需要你自己構(gòu)建一個函數(shù)，如下方downloadGridData，下面是原理：

獲取后端傳遞來的二進制數(shù)據(jù)流

傳遞到封裝的函數(shù)當(dāng)中，需要傳遞二進制數(shù)據(jù)和文件名

將二進制數(shù)據(jù)流包裹成一個new Blob對象

將Blob對象轉(zhuǎn)化為一個URL資源地址，這個地址時一個本地地址

創(chuàng)建一個a標(biāo)簽，設(shè)置隱藏，添加下載屬性，添加到body當(dāng)中，啟動下載

下載完畢之后，刪除a標(biāo)簽；

注意事項：

????在vue框架當(dāng)中，數(shù)據(jù)請求是借助axios的，為此，在發(fā)送請求的時候，需要修改responseType，改為arraybuffer，axios默認(rèn)情況下responseType為json，若是不修改，很可能下載時候會是亂碼，或者為null,還需注意很多項目中對axios進行了封裝攔截返回一直導(dǎo)致獲取不到返回的數(shù)據(jù)這個一點也各位也要注意；

????下方提供兩個案例：

案例1

• 前端

downloadGridData: function () {var _this = this_this.$http({method: 'get',url: '/proxy/api/v1/disk/testDownload',data: {},headers: {'Content-Type': 'application/json','debug': 1,},responseType:"blob",}).then(response => {let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})let dateTime = new Date()let dateTimeStr = dateTime.getFullYear() + '-' + dateTime.getMonth() + '-' + dateTime.getDay()let filename = '意向患者-' + dateTimeStr + '_' + new Date().getTime() + '.xls'if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename)} else {var blobURL = window.URL.createObjectURL(blob)// 將blob對象轉(zhuǎn)為一個URLvar tempLink = document.createElement('a')// 創(chuàng)建一個a標(biāo)簽tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', filename)// 給a標(biāo)簽添加下載屬性if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)// 將a標(biāo)簽添加到body當(dāng)中tempLink.click()// 啟動下載document.body.removeChild(tempLink)// 下載完畢刪除a標(biāo)簽window.URL.revokeObjectURL(blobURL)}}).catch((error) => {//console.log(error)})},

• 后端

public void orderDownload(@RequestBody OrderProductsReq req,HttpServletResponse response) {String orderToStr = dateToStr(req.getOrderTo() == null ? null : req.getOrderTo());String orderFromStr = dateToStr(req.getOrderFrom() == null ? null : req.getOrderFrom());//----------------處理文件名--------------------String fromTempStr = orderFromStr == null ? "最開始" : orderFromStr;String toTempStr = orderToStr == null ? "現(xiàn)在" : orderToStr;String fileName = fromTempStr+"-"+toTempStr+"意向記錄:" + System.currentTimeMillis();//-------------------------------------------------try {response.setHeader("Content-type", "application/vnd.ms-excel");// 解決導(dǎo)出文件名中文亂碼response.setCharacterEncoding("UTF-8");response.setHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes("UTF-8"), "ISO-8859-1") + ".xlsx");orderProductsService.orderDownload(req,response.getOutputStream());} catch (Exception e) {e.printStackTrace();} } //數(shù)據(jù)寫入流部分代碼 List<OrderProductsQueryRes> rowList = result.getResult(); // 1.創(chuàng)建Excel工作薄對象 Workbook wb = new XSSFWorkbook(); // 2.創(chuàng)建Excel工作表對象 Sheet sheet = wb.createSheet("意向患者"); //3.將數(shù)據(jù)寫入sheet bulidFirstSheet(sheet, rowList); try {//4.將Excel寫入到輸出流里面wb.write(outputStream); } catch (Exception e) {e.printStackTrace(); } finally {try {wb.close();outputStream.close();outputStream.flush();} catch (IOException e) {e.printStackTrace();} }

案例2

• 前臺： 文件名可以通過response.headers獲取設(shè)置或者在前端處理

downloadGridData: function () {var _this = thisthis.$http.post(_this.$host + 'admin_product_order_manage/orderListDownload', _this.search, {responseType: 'arraybuffer'}).then(response => {let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})let dateTime = new Date()let dateTimeStr = dateTime.getFullYear() + '-' + dateTime.getMonth() + '-' + dateTime.getDay()let filename = '意向患者-' + dateTimeStr + '_' + new Date().getTime() + '.xls'if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename)} else {var blobURL = window.URL.createObjectURL(blob)// 將blob對象轉(zhuǎn)為一個URLvar tempLink = document.createElement('a')// 創(chuàng)建一個a標(biāo)簽tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', filename)// 給a標(biāo)簽添加下載屬性if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)// 將a標(biāo)簽添加到body當(dāng)中tempLink.click()// 啟動下載document.body.removeChild(tempLink)// 下載完畢刪除a標(biāo)簽window.URL.revokeObjectURL(blobURL)}}).catch((error) => {//console.log(error)}) }

• 后端同上

總結(jié)

以上是生活随笔為你收集整理的vue下载导出Excel案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。