vue中post请求返回二进制流文件下载

news2024/11/13 6:31:25

1 .调用接口返回的如下图所示,此时看到是一个流文件

2.不管是get请求还是post请求都需要加上 下面这行代码

  responseType: "blob",

 3.我们自行二次封装的axios可能会导致乱码现象,建议直接用axios调用接口请求

 4.关于Excel导出 POI 响应头设置 Content-Type: application/vnd.ms-excel 异常解决方法,可以在需要的请求头处多加一个

axios.defaults.headers['Content-type'] = 'application/vnd.ms-excel;charset=utf-8';

打印出来的res,通过a标签下载就可以了 

完整代码如下 

function exportData(res: any) {
    let url = window.URL.createObjectURL(new Blob([res], { type: '.xlsx' }));
    let a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.setAttribute('download', `数据统计报表.xlsx`);
    document.body.appendChild(a);
    a.click();
    url = window.URL.revokeObjectURL(url);
    document.body.removeChild(a)
}
//导出文件
const microApptaskExport = async (params: object = {}) => {
    axios.defaults.headers["Authorization"] = userState.token;
    axios.defaults.headers['Content-type'] = 'application/vnd.ms-excel;charset=utf-8';
    const res = await axios.post(
        "http:// 此处为请求地址",
        params,
        {
            responseType: "blob",
        }
    );
    if (res) {
        console.log(res, '获取到的res')
        exportData(res.data);
    }
}

 注:如果下载的文件为 [object,object] ,将res.data给函数就行

踩坑一 : 封装的index.ts请求中使用了mockjs 这会导致 blob 置空 ,建议直接使用axios请求

踩坑二:请求地址为http这时控制台会报错

解决方法 http => https,没有别的办法 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1986910.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tomcat高可用集群(实例详解)

一.环境准备 虚拟机的版本:VMware-workstation-full-15.5.6-16341506.exe系统镜像版本:CentOS-6.10-x86_64-bin-DVD1.iso,全新安装,桌面版,可上网系统内存大小:1GB系统硬盘大小:20GB连接工具版…

《决胜B端 产品经理升级之路》 知识点总结

什么是b端产品? b端产品是指面向企业或组织的经营管理问题,旨在解决企业规模、成本、效率、品质和风控等方面的产品。这些产品主要帮助企业提高运营效率、降低成本、改善品质和控制风险等。b端产品适用于各种行业和企业类型,可以为企业带来深…

WordPress原创插件:disable-gutenberg禁用古腾堡编辑器和小工具

WordPress原创插件:disable-gutenberg禁用古腾堡编辑器和小工具 disable-gutenberg插件下载:https://download.csdn.net/download/huayula/89616495

【zlm】针对单个设备的音频的编码的设置

目录 结论 原理 测试 结论 为了防止zlm音频配置里设置成opus优先,在国标推流时,调用push时,默认加上codecpcma 如下 https://10.60.100.196:10443/index/api/webrtc?applive&streamtest&typepush&codecpcma 原理 测试 …

ASP.Net Core设置接口根路径的方法

使用asp.net core开发微服务项目,需要给每个服务设置不同的根路径,这样既能使用网关转发请求,又方便对单个服务进行测试,保证请求路径的统一。 设置方法需要使用中间件,在Program.cs添加如下代码 app.UsePathBase(&qu…

量化投资基础(四)之AR、MA、ARMA与ARIMA模型

点赞、关注,养成良好习惯 Life is short, U need Python 量化投资基础系列,不断更新中 1 引言 时间序列经典模型主要有: 自回归模型(Auto Regressive,AR)移动回归模型(Moving Average,MA&…

无线领夹麦克风哪个品牌好,哪款领夹式麦克风性价比高

随着自媒体行业的蓬勃发展,内容创作者对高质量音频设备的需求日益增长。无线领夹麦克风,凭借其便携性、高音质与灵活性,正逐渐成为视频制作、直播互动及日常Vlog记录的标配工具。其兴起不仅反映了创作者对专业录音品质的追求,也体…

Web安全学习

1 计算机网络与协议 1.1 网络基础 1.1.1 计算机通信网的组成 计算机网络由通信子网和资源子网组成。 通信子网:负责数据的无差错和有序传递,其处理功能包括差错控制、流量控制、路由选择、网络互连等。 资源子网:是计算机通信的本地系统环境…

全球油价与棕榈油市场波动

一、油价暴跌与经济衰退担忧 周一(8月5日)欧盘时段,油价暴跌,两大主要基准油价均下跌逾2%,触及八个月低点。油价的急剧下跌主要是由于人们担心全球最大的石油消费国美国可能陷入衰退。全球疲弱的经济数据加剧了人们对燃…

绿色精益生产新潮流:环保也能成为竞争力!

在当今这个快速变化且竞争激烈的市场环境中,企业面临着前所未有的挑战。为了保持竞争力并实现可持续发展,企业必须不断探索和采用更高效、更灵活的生产管理方式。精益生产,作为一种源自日本丰田汽车公司的生产哲学,凭借其消除浪费…

Animate软件基本概念:组和文本

这里继续介绍Animate软件中的基本概念,组和文本两个概念。 FlashASer:AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer:实用的各种Adobe Animate软件教程https://zhuanlan.zhihu.com/p/675680471 Fl…

Go - 10. * 值类型和指针类型的差异

目录 一.引言 二.接收者类型 三.代码示例 1.指针接收者 2.值接收者 3.运行结果对比 4.代码修改 5.刨根问底 四.总结 一.引言 go 语言中 func (c *Title) 和 func (c Title) 两个方法的传参差一个 * 号,二者的区别是一个是指针类型,一个是值类型…

scratch水仙花数 2024年6月scratch四级 中国电子学会图形化编程 少儿编程等级考试四级真题和答案解析

目录 scratch水仙花数 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、p…

深度学习入门(一):感知机与输入数据

单层感知机与多层感知机 单层感知机(Single-Layer Perceptron)和多层感知机(Multi-Layer Perceptron,简称MLP)是神经网络的基本形式,用于执行各种机器学习任务,包括分类和回归。它们都基于早期…

赚他10个亿...

体育竞技 & 商业价值 虽然昨天遭受了全球黑一,但四年一度的奥运会还是要关注的。 不知道最近大家是否有关注巴黎奥运会,印象深刻的项目又是哪个? 截止于发稿前,目前「金牌榜」上,中国以微弱优势位于第一&#xff0…

CDGA/CDGP数据治理证书:含金量高,职场竞争力提升的明智之选

在当今这个数据驱动的时代,数据已成为企业最宝贵的资产之一,而高效、合规的数据治理则是挖掘数据价值、驱动业务增长的关键。随着企业对数据治理重视程度的不断提升,拥有专业数据治理知识和技能的人才变得尤为稀缺。在此背景下,CD…

win10批量修改文件名,记得保存文件

打开需要修改的文件夹新建文本内容如下 DIR . /B>文件列表.csv 并另存为bat文件,注意编码,双击bat文件生成Excel 打开Excel 填写你的文件名至B列,如我需要在文件名前面都加上spi5_公式D1&A1 C列输入"REN "&"""&q…

【C++BFS算法】2059. 转化数字的最小运算数

本文涉及知识点 CBFS算法 LeetCode2059. 转化数字的最小运算数 给你一个下标从 0 开始的整数数组 nums ,该数组由 互不相同 的数字组成。另给你两个整数 start 和 goal 。 整数 x 的值最开始设为 start ,你打算执行一些运算使 x 转化为 goal 。你可以…

实验8-1-7 数组循环右移

本题要求实现一个对数组进行循环右移的简单函数:一个数组a中存有n(>0)个整数,将每个整数循环向右移m(≥0)个位置,即将a中的数据 (最后m个数循环移至最前面的m个位置)…