vue axios ts 封裝流文件下載方法

// 定義文件下載的接口 interface DOWNFILETYPE {url: string; //請求地址method: string; //請求方式params: object; //請求參數filename?: string; //文件名稱type: string; //文件類型 }

文件下載方法實現

function downloadFile(options: DOWNFILETYPE): any {const { url, method, params, filename, type } = options;let config = {url: url,baseURL: baseURL.baseURL,method: method,responseType: "blob",headers: {"X-Access-Token": getStore("token") ? getStore("token") : "",},};if (method == "get") {config["params"] = params;} else {config["data"] = params;}axios(config).then((response) => {let data = response.data;// 請求失敗，后臺返回jsonif (data && data.type && data.type.includes("application/json")) {let reader = new FileReader();reader.onload = function (event) {let result: any = reader.result;let message = JSON.parse(result).message;//錯誤處理(Message as any).closeAll();Message.error(message || "");};reader.readAsText(data);return true;}//請求成功，下載文件const content: any = data;const blob = new Blob([content], { type: "application/octet-stream" });let file_name = filename ? filename + type : response.headers["content-disposition"] ?decodeURIComponent(response.headers["content-disposition"].split("filename=")[1]) :"導出文件" + typeif ("download" in document.createElement("a")) {// 非IE下載const elink = document.createElement("a");elink.download = file_name;elink.style.display = "none";elink.href = window.URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href);document.body.removeChild(elink);} else {// IE10+下載navigator.msSaveBlob(blob, file_name);}}); }

需要注意的點：
axios攔截器對返回流類型的設置

axios.interceptors.response.use(function(response) {console.log("Response", response)if (response.status == 200) {let responseData = response.dataif (response.config.responseType == "blob") {return response;}return responseData} else {return {}}},function(error) {} )

總結

以上是生活随笔為你收集整理的vue axios ts 封装流文件下载方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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