React獲取Java后臺(tái)文件流并下載Excel文件流程解析
記錄使用blob對(duì)象接收java后臺(tái)文件流并下載為xlsx格式的詳細(xì)過(guò)程,關(guān)鍵部分代碼如下。
首先在java后臺(tái)中設(shè)置response中的參數(shù):
public void exportExcel(HttpServletResponse response, String fileName, String sheetName, List<String> titleRow, List<List<String>> dataRows) { OutputStream out = null; try { // 設(shè)置瀏覽器解析文件的mime類(lèi)型,如果js中已設(shè)置,這里可以不設(shè)置 // response.setContentType("application/vnd.ms-excel;charset=gbk"); // 設(shè)置此項(xiàng),在IE瀏覽器中下載Excel文件時(shí)可彈窗展示文件下載 response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8")); // 允許瀏覽器訪問(wèn)header中的FileName response.setHeader("Access-Control-Expose-Headers", "FileName"); // 設(shè)置FileName,轉(zhuǎn)碼防止中文亂碼 response.setHeader("FileName", URLEncoder.encode(fileName, "UTF-8")); out = response.getOutputStream(); ExcelUtils.createExcelStream(out, sheetName, titleRow, dataRows); out.close(); } catch (Exception e) { if (Objects.nonNull(out)) { try { out.close(); } catch (IOException e1) { log.error("導(dǎo)出失敗", e); } } throw Exceptions.fail(ErrorMessage.errorMessage("500", "導(dǎo)出失敗")); } }
此時(shí)在瀏覽器的調(diào)試面板中可以看到導(dǎo)出接口的response header參數(shù)如下:
access-control-allow-credentials: true
access-control-allow-methods: GET,POST,PUT,DELETE,OPTIONS
access-control-allow-origin: http://local.dasouche-inc.net:8081
access-control-expose-headers: FileName
connection: close
content-type: application/vnd.ms-excel;charset=gbk
date: Sun, 29 Mar 2020 10:59:54 GMT
filename: %E4%B8%BB%E6%92%AD%E5%88%97%E8%A1%A8166296222340726.xlsx
接下來(lái)我們?cè)谇岸舜a中獲取文件流:
handleExport = () => { axios.post(`下載文件的接口請(qǐng)求路徑`, {}, { params: { 參數(shù)名1: 參數(shù)值1, 參數(shù)名2: 參數(shù)值2 }, // 設(shè)置responseType對(duì)象格式為blob responseType: "blob" }).then(res => { // 創(chuàng)建下載的鏈接 const url = window.URL.createObjectURL(new Blob([res.data], // 設(shè)置該文件的mime類(lèi)型,這里對(duì)應(yīng)的mime類(lèi)型對(duì)應(yīng)為.xlsx格式 {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})); const link = document.createElement('a'); link.href = url; // 從header中獲取服務(wù)端命名的文件名 const fileName = decodeURI(res.headers['filename']); link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); }); };
至此就可以愉快地下載xlsx格式的文件啦~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
從零開(kāi)始最小實(shí)現(xiàn)react服務(wù)器渲染詳解
這篇文章主要介紹了從零開(kāi)始最小實(shí)現(xiàn)react服務(wù)器渲染詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01React實(shí)現(xiàn)文件分片上傳和下載的方法詳解
在當(dāng)今的前端開(kāi)發(fā)中,處理文件流操作已經(jīng)成為一個(gè)常見(jiàn)的需求,無(wú)論是上傳、下載、讀取、展示還是其他的文件處理操作,都需要高效且可靠地處理二進(jìn)制數(shù)據(jù),本文將深入探討如何使用 React 實(shí)現(xiàn)文件分片上傳和下載,并介紹相關(guān)的基本概念和技術(shù),需要的朋友可以參考下2023-08-08解決React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of?Router,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12react-router?v6實(shí)現(xiàn)權(quán)限管理+自動(dòng)替換頁(yè)面標(biāo)題的案例
這篇文章主要介紹了react-router?v6實(shí)現(xiàn)權(quán)限管理+自動(dòng)替換頁(yè)面標(biāo)題,這次項(xiàng)目是有三種權(quán)限,分別是用戶(hù),商家以及管理員,這次寫(xiě)的權(quán)限管理是高級(jí)權(quán)限能訪問(wèn)低級(jí)權(quán)限的所有頁(yè)面,但是低級(jí)權(quán)限不能訪問(wèn)高級(jí)權(quán)限的頁(yè)面,需要的朋友可以參考下2023-05-05React生命周期與父子組件間通信知識(shí)點(diǎn)詳細(xì)講解
生命周期函數(shù)指在某一時(shí)刻組件會(huì)自動(dòng)調(diào)用并執(zhí)行的函數(shù)。React每個(gè)類(lèi)組件都包含生命周期方法,以便于在運(yùn)行過(guò)程中特定的階段執(zhí)行這些方法2022-11-11初識(shí)React及React開(kāi)發(fā)依賴(lài)詳解
React由Facebook來(lái)更新和維護(hù),它是大量?jī)?yōu)秀程序員的思想結(jié)晶,React的流行不僅僅局限于普通開(kāi)發(fā)工程師對(duì)它的認(rèn)可,大量流行的其他框架借鑒React的思想,接下來(lái)通過(guò)本文介紹React基礎(chǔ)及React開(kāi)發(fā)依賴(lài)介紹,需要的朋友可以參考下2022-10-10詳解基于webpack搭建react運(yùn)行環(huán)境
本篇文章主要介紹了詳解基于webpack搭建react運(yùn)行環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06React根據(jù)當(dāng)前頁(yè)面路由進(jìn)行自動(dòng)高亮示例代碼
要根據(jù)當(dāng)前頁(yè)面路由自動(dòng)高亮頂部菜單項(xiàng),可以使用 React Router 的 useLocation 鉤子來(lái)獲取當(dāng)前路徑,并根據(jù)路徑動(dòng)態(tài)設(shè)置菜單項(xiàng)的高亮效果,本文給大家介紹了一個(gè)完整的示例,展示如何根據(jù)當(dāng)前頁(yè)面路由自動(dòng)高亮頂部菜單項(xiàng),需要的朋友可以參考下2024-07-07關(guān)于react-router-dom路由入門(mén)教程
這篇文章主要介紹了關(guān)于react-router-dom路由入門(mén)教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03