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

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

獲取后端傳遞來的二進制數據流

傳遞到封裝的函數當中，需要傳遞二進制數據和文件名

將二進制數據流包裹成一個new Blob對象

將Blob對象轉化為一個URL資源地址，這個地址時一個本地地址

創建一個a標簽，設置隱藏，添加下載屬性，添加到body當中，啟動下載

下載完畢之后，刪除a標簽；

注意事項：

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

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

案例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對象轉為一個URLvar tempLink = document.createElement('a')// 創建一個a標簽tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', filename)// 給a標簽添加下載屬性if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)// 將a標簽添加到body當中tempLink.click()// 啟動下載document.body.removeChild(tempLink)// 下載完畢刪除a標簽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 ? "現在" : orderToStr;String fileName = fromTempStr+"-"+toTempStr+"意向記錄:" + System.currentTimeMillis();//-------------------------------------------------try {response.setHeader("Content-type", "application/vnd.ms-excel");// 解決導出文件名中文亂碼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();} } //數據寫入流部分代碼 List<OrderProductsQueryRes> rowList = result.getResult(); // 1.創建Excel工作薄對象 Workbook wb = new XSSFWorkbook(); // 2.創建Excel工作表對象 Sheet sheet = wb.createSheet("意向患者"); //3.將數據寫入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獲取設置或者在前端處理

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對象轉為一個URLvar tempLink = document.createElement('a')// 創建一個a標簽tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', filename)// 給a標簽添加下載屬性if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)// 將a標簽添加到body當中tempLink.click()// 啟動下載document.body.removeChild(tempLink)// 下載完畢刪除a標簽window.URL.revokeObjectURL(blobURL)}}).catch((error) => {//console.log(error)}) }

• 后端同上

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。