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-01
React實(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-12
react-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-05
React生命周期與父子組件間通信知識(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-06
React根據(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

