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 封装流文件下载方法相关推荐

vue axios全局封装请求和 vue三种js跳转页面方式
axios全局封装请求第一步在src文件下新建api文件文件下新建request.js文件 // 导入axios import axios from "axios"; // 进 ...
vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法就不多说了请移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
vue axios 实现文件流下载（前后端分离跨域问题的解决）
前端代码后端以流的形式返回单个文件下载 @RequestMapping(value = "download", method = RequestMethod.POST)@Api ...
vue 后端返回二进制流文件，前端如何实现下载？
目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流: 1.2 使用: 1.3 需要注意以下几点: 2. 关于 arraybuffer 和 blob 2.1 ArrayBuff ...
vue+axios方法封装(restful,ajax)
this.$get({url: '',data: {},success: (data) => {}}) import qs from 'qs'// axios网络请求 function ajax ...
vue项目请求封装；axios封装使用
vue项目,封装axios请求方式和响应状态码:以及接口的api封装: 目录结构: 1.具体在src/utils/request.js下封装axios: ①引入axios和router ②引入elem ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
在项目中用ts封装axios
写在前面虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就 ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
vue如何封装请求接口方法
vue如何封装请求接口方法方法一首先创建一个server.js文件引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs fr ...

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

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

vue axios ts 封装流文件下载方法相关推荐

最新文章

热门文章