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

￡神魔★判官ぃ 2022-11-19 12:44 366阅读 0赞

## 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) { }
    )

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE + axios 封装

　　安装依赖　　安装axios 　　npm i axios 　　安装qs 　　npm i qs 　　封装　　【utils/request.js】　　impo

系统管理员/ 2023年10月11日 19:07/ 0 赞/ 18 阅读

相关 vue.js - axios如何下载文件？

[https://www.zhihu.com/question/263323250/answer/267842980][https_www.zhihu.com_question

客官°小女子只卖身不卖艺/ 2023年06月02日 05:30/ 0 赞/ 27 阅读

相关 vue axios封装方法

创建个request.js 文件 import axios from "axios"; import { throwErr } from "../utils

Myth丶恋晨/ 2023年02月15日 05:20/ 0 赞/ 4 阅读

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

vue axios ts 封装流文件下载方法 // 定义文件下载的接口 interface DOWNFILETYPE { url: st

怼烎@/ 2023年01月06日 01:16/ 0 赞/ 235 阅读

相关 axios封装 vue

引入axios封装 import axios from "axios"; // axios封装请求方法 // axios配置 con

野性酷女/ 2022年12月20日 05:37/ 0 赞/ 245 阅读

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

vue axios ts 封装流文件下载方法 // 定义文件下载的接口 interface DOWNFILETYPE { url: st

￡神魔★判官ぃ/ 2022年11月19日 12:44/ 0 赞/ 367 阅读

相关 Vue 封装axios

引入axios cnpm install axios -S 新建一个文件夹api在这个文件夹下创建 request.js import axio

╰+攻爆jí腚メ/ 2022年10月09日 00:30/ 0 赞/ 283 阅读

相关 vue 封装axios

import axios from "axios"; axios.defaults.headers.common["Content-Type"] ="appli

女爷i/ 2022年04月10日 06:28/ 0 赞/ 354 阅读

相关 vue axios 下载文件

功能：点击导出按钮，提交请求，下载excel文件；第一步：跟后端童鞋确认交付的接口的response header设置了 ![response header][] 以及

刺骨的言语ヽ痛彻心扉/ 2021年09月24日 11:34/ 0 赞/ 463 阅读

相关 vue-文件下载封装实现

最近用vue整前端，有个下载帮助文档的需求，前后端分离的项目，对于万年不变的帮助文档来说，本次就准备放在前端，实现直接从前端下载文件：下面是实现的具体方法： do

偏执的太偏执、/ 2021年09月24日 06:20/ 0 赞/ 473 阅读