vue axios ts 封装流文件下载方法

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 封装流文件下载方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。