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;
        // 请求失败，后台返回json
        if (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]) :
            "导出文件" + type
            
        if ("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.data
            if (response.config.responseType == "blob") {
                return response;
            }
            return responseData
        } else {
            return {}
        }
    },
    function(error) {}
)