前端导出下载文件后提示无法打开文件

news2024/11/13 9:49:07

问题

项目中的导出文件功能,导出下载后的文件打开提示如下:

请添加图片描述

原因

对返回的响应数据进行打印,发现响应数据为字符串格式,前期规划的后端返回数据应该 blob 对象的。后经排查后发现是请求头缺少了响应数据格式的配置,应该在请求头加上 responseType 属性配置后端返回的数据格式才正确(这里根据自身需求来进行配置,作者项目中需要得到 blob 对象所以配置为 responseType: ‘blob’)。

作者这里是对 axios 请求进行了封装,代码如下:

export function TrackExport(data: any) {
    return axios({
        url: '/...',
        method: 'POST',
        data,
        headers: {
          'Content-Type': 'application/json; application/octet-stream'
        },
        responseType: 'blob' //响应数据格式配置
    })
}

返回响应数据:

请添加图片描述
添加之后,相应返回来的数据格式就正确了。

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

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

相关文章

数据同步MySQL -> Elasticsearch

大家好我是苏麟,今天聊聊数据同步 . 数据同步 一般情况下,如果做查询搜索功能,使用 ES 来模糊搜索,但是数据是存放在数据库 MySQL 里的,所以说我们需要把 MySQL 中的数据和 ES 进行同步,保证数据一致(以 MySQL 为主)…

力扣645. 错误的集合(排序,哈希表)

Problem: 645. 错误的集合 文章目录 题目描述思路复杂度Code 题目描述 思路 1.排序 1.对nums数组按从小到大的顺序排序; 2.遍历数组时若判断两个相邻的元素则找到重复元素; 3.记录一个整形变量prev一次置换当前位置元素并与其作差,若差等于2着说明缺失的…

【vue】如何打开别人编译后的vue项目

文件结构如下,编译后的文件放在dist中。 dist的文件结构大约如下,文件名称随项目 1.新建app.js文件 const express require(express);const app express();const port 8080;app.use(express.static(dist));app.listen(port, () > console.log); …

Bluesky数据采集框架-1

Bluesky是一个用于实验控制和科学数据和元数据采集的库。它强调以下特点: 1、实时,流式数据:可用于嵌入可视化和处理。 2、丰富元数据:获取和组织来方便复制性和可检索性。 3、实验通用性:对完全不同的硬件无缝地重…

c#高级——插件开发

案例:WinForm计算器插件开发 1.建立插件库,设置各种自己所需的插件组件 如下图所示:进行了计算器的加减法插件计算组件 Calculator_DLL为总插件父类 Calculator_DLL_ADD 为插件子类的控件对象 Calculator_DLL_Sub Calculator_DLL_Factory 为…

JavaSec 基础之 XXE

文章目录 XMLReaderSAXReaderSAXBuilderDocumentBuilderUnmarshaller**SAXParserFactory**XMLReaderFactoryDigester总结 XMLReader public String XMLReader(RequestBody String content) {try {XMLReader xmlReader XMLReaderFactory.createXMLReader();// 修复&#xff1a…

ESP8266智能家居(4)——开发APP基础篇

1.前期准备 安装好Android studio 开发环境 准备一台完好的安卓手机 手机要处于开发者模式 设置 --->关于手机---> 一直点击版本号 (不同手机进入开发者模式的步骤可能不太一样) 进入开发者模式后,找到辅助功能,打开开…

2.22日学习打卡----正则表达式

2.22日学习打卡 目录: 2.22日学习打卡正则表达式什么是正则表达式?正则表达式的作用正则表达式特点基础语法表格元字符Java 中正则表达式的使用正则表达式语法规则内容限定单个字符限定范围字符限定取反限定 长度限定长度限定符号预定义字符正则表达式的…

Qt的QFileSystemModel与QTreeView、QTableView、QListView的组合使用

1.相关描述 QFileSystemModel与QTreeView、QTableView、QListView的组合,当QTreeView点击发生改变,QTableView和QListView也会发生变化 2.相关界面 3.相关代码 mainwindow.cpp #include "mainwindow.h" #include "ui_mainwindow.h"…

微服务-微服务Spring Security6实战

1. Spring Security介绍 1.1 Spring Security定义 Spring Security 是一个能够为基于 Spring 的企业应用系统提供声明式的安全访问控制解决方案的安全框 架。 Spring Security 主要实现了 Authentication (认证,解决 who are you? ) 和…

跳槽前应该做好哪些准备?

第一次求职也好,还是换工作也罢,都需要有严谨的考虑。对于已经工作上班的朋友来说,切不可轻易地辞掉工作,想要跳槽,一定要三思而后行,有一个周密的部署。跳槽有好处,也有弊端,频繁的…

黄仁勋最新专访:机器人基础模型可能即将出现,新一代GPU性能超乎想象

最近,《连线》的记者采访了英伟达CEO黄仁勋。 记者表示,与Jensen Huang交流应该带有警告标签,因为这位Nvidia首席执行官对人工智能的发展方向如此投入,以至于在经过近 90 分钟的热烈交谈后,我(指代本采访的…

手机单目相机内参标定

使用软件: 参考我之前的文章: 软件地址:https://github.com/DavidGillsjo/VideoIMUCapture-Android/releases 棋盘标定板下载 链接: https://pan.baidu.com/s/1wiPJsEf87Vc0D7KwJnt3GA?pwd1234 提取码: 1234 过程 1.使用下载的软件录制一段视频&am…

重学Java 18.学生管理系统项目

臣无祖母,无以至今日,祖母无臣,无以终余年 母孙二人,更相为命,是以区区不能废远 —— 陈情表.李密 —— 24.2.20 一、编写JavaBean public class Student {//学号private int id;//姓名private String name;//年龄pr…

MySQL死锁产生的原因和解决方法

一.什么是死锁 要想知道MYSQL死锁产生的原因,就要知道什么是死锁?在了解什么是死锁之前,先来看一个概念:线程安全问题 1.线程安全问题 1.1什么是线程安全问题 线程安全问题,指的是在多线程环境当中,线程并发访问某个资源,从而导致的原子性&a…

module ‘json‘ has no attribute ‘dumps‘

如果在使用Python的json模块时遇到AttributeError: module json has no attribute dumps错误,通常是因为在Python环境中json模块不支持dumps方法。这种情况可能是因为Python的json模块被重命名或修改过导致的。 解决方法可以尝试以下几种: 1.检查Pytho…

围剿尚未终止 库迪深陷瑞幸9.9阳谋

文|智能相对论 作者|霖霖 总能被“累了困了”的打工人优先pick的咖啡,刚复工就顺利站上话题C位。 #瑞幸9.9元一杯活动缩水#的话题才爬上新浪微博热搜,“库迪咖啡河北分公司运营总监带头坑害河北联营商”的实名举报帖就出现在了小红书,一时…

复旦大学MBA聚劲联合会:洞见智慧,拓宽思维格局及国际化视野

12月2日,“焕拥时代 俱创未来”聚劲联合会俱创会年度盛典暨俱乐部募新仪式圆满收官。16家复旦MBA俱乐部、200余名同学、校友、各界同仁齐聚复旦管院,一起在精彩纷呈的圆桌论坛里激荡思想,在活力四射的俱乐部风采展示中凝聚力量。      以…

第四十二回 假李逵翦径劫单身 黑旋风沂岭杀四虎-python读写csv和json数据

李逵答应了宋江三件事:不可吃酒,独自前行,不带板斧。李逵痛快答应了,挎一口腰刀,提着朴刀,带了一锭大银子,三五个小银子就下山去了。 宋江放心不下,于是请同乡朱贵也回家一趟&#…

Mybatis总结--传参

MyBatis 传递参数:从 java 代码中把参数传递到 mapper.xml 文件 六、一个简单参数: Dao 接口中方法的参数只有一个简单类型( java 基本类型和 String ), 占位符 #{ 任意字符 } ,和方法的参数名无关…