欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React獲取Java后臺(tái)文件流并下載Excel文件流程解析

 更新時(shí)間:2020年06月17日 10:26:54   作者:不少于4個(gè)字節(jié)  
這篇文章主要介紹了React獲取Java后臺(tái)文件流下載Excel文件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

記錄使用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ù)器渲染詳解

    這篇文章主要介紹了從零開(kāi)始最小實(shí)現(xiàn)react服務(wù)器渲染詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • React實(shí)現(xiàn)文件分片上傳和下載的方法詳解

    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?Router

    解決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)題的案例

    這篇文章主要介紹了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ì)講解

    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
  • react-native只保留3x圖原理解析

    react-native只保留3x圖原理解析

    這篇文章主要為大家介紹了react-native只保留3x圖原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • 初識(shí)React及React開(kāi)發(fā)依賴(lài)詳解

    初識(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)境

    本篇文章主要介紹了詳解基于webpack搭建react運(yùn)行環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • React根據(jù)當(dāng)前頁(yè)面路由進(jìn)行自動(dòng)高亮示例代碼

    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)教程

    這篇文章主要介紹了關(guān)于react-router-dom路由入門(mén)教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03

最新評(píng)論