前端封裝通用下載方法及下載后端返回的文件流

目錄

1.下載方法封裝

2.將后端返回的文件流轉換為文件

3.總結


1.下載方法封裝

①說明

前端的請求大概分為三種類型

普通請求:常用的get,post,put,delete等請求

上傳請求:使用post請求,發送formdata對象的參數,formdata中存放文件及其他參數

下載請求:使用post請求,設置響應格式為blob或者arraybuffer

②通用下載請求說明

api:

// 共通下載方法
export function dowload(url:string,params:any,filename:string,config:any) {return  axios.post(url,params,{    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },responseType: 'blob',...config}).then((data:any) =>{if(data.type !== 'application/json'){const blob = new Blob([data],{ type: 'application/vnd.ms-excel' })saveAs(blob,filename)// let objectUrl = URL.createObjectURL(blob) // 創建URL// let link = document.createElement("a");// link.href = objectUrl// link.download =filename // 自定義文件名// link.click() // 下載文件// URL.revokeObjectURL(objectUrl); // 釋放內存}}).catch((r:any) =>{console.log(r)Message.error({ content: '下載文件出現錯誤,請聯系管理員!', position: 'top' });})}

說明:

前端下載后端的文件,一般分為兩種類型,后端返回文件流或者后端將文件存儲在服務器,將地址返回至前端。

我使用的是后端返回文件流的方式,前端的請求需要將responseType設置為blob格式,代表后端返回的是二進制文件流。content-type按照需要進行設置,可以設置為application/x-www-form-urlencoded或者application/json,不同的方式決定了后端接收參數的方式不一樣。

攔截器設置:

axios.interceptors.response.use((response: AxiosResponse<any>) => {// 二進制數據則直接返回if (response.request.responseType === 'blob') {return response.data}const res = response.data;let resCode = res.resHdr?.resCode;let resMsg = res.resHdr?.resMsg || "請求未知異常";if (resCode == "9990_10" || resCode == "9990_9") {Message.error({content: "登錄信息過期,請重新登錄",duration: 5 * 1000,});// 跳轉登錄頁面router.push("/login");return Promise.reject(new Error(resMsg));}if (resCode !== "0000") {Message.error({content: resMsg,duration: 5 * 1000,});return Promise.reject(new Error(resMsg));}return res.resBody;},(error) => {Message.error({content: error.msg || "請求未知異常",duration: 5 * 1000,});return Promise.reject(error);}
);

說明:

響應攔截器中要對responseType進行判斷,如果是blob格式的,直接返回response中的data,其他格式時,一般為json,需要獲取返回的data的返回值進行判斷,登錄過期時跳轉到登錄畫面,并進行信息提示,異常時進行信息提示,正常時返回data,然后在接口中對data的內容進行處理。

2.將后端返回的文件流轉換為文件

在通過下載方法中,獲取到返回的data數據,需要將數據流轉為文件。

方式1:

// 共通下載方法
export function dowload(url:string,params:any,filename:string,config:any) {return  axios.post(url,params,{    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },responseType: 'blob',...config}).then((data:any) =>{if(data.type !== 'application/json'){const blob = new Blob([data],{ type: 'application/vnd.ms-excel' })let objectUrl = URL.createObjectURL(blob) // 創建URLlet link = document.createElement("a");link.href = objectUrllink.download =filename // 自定義文件名link.click() // 下載文件URL.revokeObjectURL(objectUrl); // 釋放內存}}).catch((r:any) =>{console.log(r)Message.error({ content: '下載文件出現錯誤,請聯系管理員!', position: 'top' });})}

?將data轉換為blob對象,然后根據blob創建url,再創建一個a元素,將a元素的href屬性和url進行綁定,再設置下載的文件名,觸發click事件進行下載。

方式2:

使用file-saver方式

①安裝依賴:

pnpm install file-saver --savepnpm install @types/file-saver --save-dev

②使用

import { saveAs } from 'file-saver'// 共通下載方法
export function dowload(url:string,params:any,filename:string,config:any) {return  axios.post(url,params,{    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },responseType: 'blob',...config}).then((data:any) =>{if(data.type !== 'application/json'){const blob = new Blob([data],{ type: 'application/vnd.ms-excel' })saveAs(blob,filename)}}).catch((r:any) =>{console.log(r)Message.error({ content: '下載文件出現錯誤,請聯系管理員!', position: 'top' });})}

?調用saveAs方式,傳遞blob對象及文件名即可

3.總結

注意通過下載方法的封裝

注意響應攔截器首先要對響應類型進行判斷,blob格式直接返回data

生成文件直接使用file-saver方式,比較方便

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/713784.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/713784.shtml
英文地址,請注明出處:http://en.pswp.cn/news/713784.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Zookeeper學習1:概述、安裝、應用場景、集群配置

文章目錄 概述安裝LinuxWindows 配置參數集群參考配置文件配置步驟流程啟動 概述 Zookeeper&#xff1a; 為分布式框架組件提供協調服務的中間件 【類似&#xff1a;文件系統通知機制】 負責存儲上下層應用關系的數據以及接收觀察者注冊監聽&#xff0c;一旦觀察查關心的數據發…

git操作基本指令

1.查看用戶名 git config user.name 2.查看密碼 git config user.password 3.查看郵箱 git config user.email 4.修改用戶名 git config --global user.name "xxx(新用戶名)" 5.修改密碼 git config --global user.password "xxx(新密碼)" 6.修改…

筆記73:ROS中的各種消息包

參考視頻&#xff1a; 33.ROS 的標準消息包 std_msgs_嗶哩嗶哩_bilibili 34. ROS 中的幾何包 geometry_msgs 和 傳感器包 sensor_msgs_嗶哩嗶哩_bilibili 標準消息包&#xff1a;std_msgs常用消息包&#xff1a;common_msgs導航消息包&#xff1a;nav_msgs幾何消息包&#xf…

實戰分享:Tomcat打破雙親委派模型,實現Web應用獨立與安全隔離的奧秘

目錄 一、JVM 類加載機制 二、Tomcat 類加載器 2.2 findClass 介紹 3.2 loadClass 介紹 三、web應用隔離 3.1 Spring 加載問題 在開始文章內容之前&#xff0c;先來看三個問題 假如在 Tomcat 上運行了兩個 Web 應用程序&#xff0c;兩個 web 應用中有同名的Servlet&#xf…

C++數據結構與算法——二叉樹的屬性

C第二階段——數據結構和算法&#xff0c;之前學過一點點數據結構&#xff0c;當時是基于Python來學習的&#xff0c;現在基于C查漏補缺&#xff0c;尤其是樹的部分。這一部分計劃一個月&#xff0c;主要利用代碼隨想錄來學習&#xff0c;刷題使用力扣網站&#xff0c;不定時更…

AGI概念與實現

AGI AGI&#xff08;Artificial General Intelligence&#xff09;&#xff0c;中文名為“通用人工智能”或“強人工智能”&#xff0c;是指通過機器學習和數據分析等技術&#xff0c;使計算機具有類似于人類的認知和學習能力的技術. 多模態的大模型 &#xff08;Multimodal…

詳細介紹如何用windows自帶Hyper-V安裝虛擬機(windows11和ubuntu22)

通過系統自帶的hyper-v安裝windows11&#xff0c;舒服又愜意&#xff0c;相比用第三方虛擬機軟件速度快很多。 硬件準備 準備 系統需要符合能安裝 Hyper-V 的最低要求windows版本含Hyper-V的功能 電腦空間 電腦要有足夠的空間來安裝你這個虛擬機。根據自己的磁盤容量情況來規…

2673. 使二叉樹所有路徑值相等的最小代價

給你一個整數 n 表示一棵 滿二叉樹 里面節點的數目&#xff0c;節點編號從 1 到 n 。根節點編號為 1 &#xff0c;樹中每個非葉子節點 i 都有兩個孩子&#xff0c;分別是左孩子 2 * i 和右孩子 2 * i 1 。 樹中每個節點都有一個值&#xff0c;用下標從 0 開始、長度為 n 的整…

CloudCanal x Hive 構建高效的實時數倉

簡述 CloudCanal 最近對于全周期數據流動進行了初步探索&#xff0c;打通了Hive 目標端的實時同步&#xff0c;為實時數倉的構建提供了支持&#xff0c;這篇文章簡要做下分享。 基于臨時表的增量合并方式基于 HDFS 文件寫入方式臨時表統一 Schema任務級的臨時表 基于臨時表的…

【Linux實踐室】Linux初體驗

&#x1f308;個人主頁&#xff1a;聆風吟 &#x1f525;系列專欄&#xff1a;Linux實踐室、網絡奇遇記 &#x1f516;少年有夢不應止于心動&#xff0c;更要付諸行動。 文章目錄 一. ??任務描述二. ??相關知識2.1 &#x1f514;Linux 目錄結構介紹2.2 &#x1f514;Linux …

WebFlux相關問題及答案(2024)

1、什么是Spring WebFlux&#xff1f; Spring WebFlux 是 Spring Framework 5.0 中引入的一個全新的反應式框架&#xff0c;用于構建異步、非阻塞且事件驅動的服務。它允許開發者使用響應式編程模型來處理并發性很高的操作&#xff0c;而無需擔心傳統的多線程環境中的復雜性。…

poi工具讀寫excel操作學習總結

寫在前面的話 POI作為比較早期的Excel處理工具&#xff0c;其使用較為成熟且廣泛。EasyExcel相較之下&#xff0c;則是相對較新的工具&#xff0c;其卻有著比POI更為優越的一些特性&#xff0c;如更加簡單的API接口和更加優秀的性能。 性能對比&#xff1a;在數據量較小的情況下…

mybatis mysql insert 主鍵id為空

錯誤示范 java代碼設置了param參數&#xff0c;但是sql 字段沒有帶上參數&#xff0c;例如 void insertV2(Param("historyDO") HistoryDO historyDO); <insert id"insertDuplicate" parameterType"com.test.entity.HistoryDO"keyProperty&…

MySQL:一行記錄如何

1、表空間文件結構 表空間由段「segment」、區「extent」、頁「page」、行「row」組成&#xff0c;InnoDB存儲引擎的邏輯存儲結構大致如下圖&#xff1a; 行 數據庫表中的記錄都是按「行」進行存放的&#xff0c;每行記錄根據不同的行格式&#xff0c;有不同的存儲結構。 頁…

hippy 調試demo運行聯調-mac環境準備篇

適用對于終端編譯環境不熟悉的人看&#xff0c;僅mac端 hippy 調試文檔官網地址 前提&#xff1a;請使用node16 聯調預覽效果圖&#xff1a; 編譯iOS Demo環境準備 未跑通&#xff0c;待補充 編譯Android Demo環境準備 1、正常安裝Android Studio 2、下載Android NDK&a…

Windows系統誤刪文件恢復

最近很多用戶反饋誤刪文件的場景比較多.下面華仔將講解數據恢復的原理和過程.以及一些注意事項。 建議的數據恢復軟件 1.EaseUS Data Recovery Wizard(易我數據恢復)需要斷網使用 2.Wondershare Recoverit(萬興數據恢復)&#xff0c; Windows系統刪除文件原理&#xff1a;如果是…

Android ShellUtils手機管理器

1. Android ShellUtils手機管理器 Android Shell工具類&#xff0c;可用于檢查系統root權限&#xff0c;并在shell或root用戶下執行shell命令。如&#xff1a; checkRootPermission() 檢查root權限 。execCommand(String[] commands, boolean isRoot, boolean isNeedResultMsg)…

HTTPS是什么,詳解它的加密過程

目錄 1.前言 2.兩種加密解密方式 2.1對稱加密 2.2非對稱加密 3.HTTPS的加密過程 3.1針對明文的對稱加密 3.2針對密鑰的非對稱加密 3.3證書的作用 1.前言 我們知道HTTP協議是超文本傳輸協議,它被廣泛的應用在客戶端服務器上,用來傳輸文字,圖片,視頻,js,html等.但是這種傳…

java數據結構與算法刷題-----LeetCode572. 另一棵樹的子樹(經典題,樹字符串化KMP)

java數據結構與算法刷題目錄&#xff08;劍指Offer、LeetCode、ACM&#xff09;-----主目錄-----持續更新(進不去說明我沒寫完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目錄 1. 暴力求解&#xff0c;深度優先2. KMP算法進行串匹配 1. 暴力求…

WinForm、Wpf自動升級 AutoUpdater.NET

Github AutoUpdater.NET 目錄 一、IIS部署 更新站點 二、創建Winform 一、IIS部署 更新站點 IIS默認站點目錄下創建 目錄 Downloads、Updates Updates目錄創建文件 UpdateLog.html、AutoUpdaterStarter.xml UpdateLog.html&#xff1a; <html><body><h1…