Vue Excel 文件流导出乱码快速解决方案

news2024/10/5 18:24:14

今日在开发一个导出功能,原本一个非常简单的功能,却没想里面藏了陷阱!

背景

前端导出的文件流乱码,此时确定非后端问题(可以在postman导出是否正常来判断)。

前端导出:

后端正常数据:

答疑

第一,如果你要做一个导出功能(后端返回的数据位文件流),那接口可能是类似的结构

红框为必不可少的参数,且与其他参数同级,如“data”,“headers”等,如果你没有,那“还没开始就已经结束了”。

第二,前端导出代码可能是类似的结构,网上代码大同小异

对于红框部分,我在测试导出的过程中, 有跟没有乱码结果是一样的,因为这个不是决定性因素(前提是后端返回的数据为utf-8格式的文件流)。

以上两点,在后端返回正常的文件流情况下,前端导出基本是没什么问题的。

但是!如果此时你导出的文件还是出现了乱码,那就需要更深入排查了。

在参考了大部分对于该问题的应对文章后,我总算是找到了解决方案!

深入排查

首先,排查返回的数据响应头数据结构,可在响应拦截器中打印出来,查看“request”中的“response”与“responseType”

如果出现了以上情况,“responseType”是空的,“response”(即“data”)不是blob对象而是一个字符串,这就有问题了。 

正常来说,前端响应接收到应该是一个blob对象,类似

针对这个问题,我排查了蛮久,明明自己在请求接口加了参数 responseType: 'blob'

为啥响应体该字段是空?且返回数据不是blob对象?

在参考了多篇博客,经过仔细排查之后,发现一个问题,就是我项目中使用了“mock”,没错,就是可以劫持请求的那个“mock”!也正是因为它,将我的“responseType”置空!如下:

vue.config.js 配置:

(此时process.env.VUE_APP_BUILD_MODE不是“nomock”,导致使用“mock”)

mock 配置:

(此时responseType: ' ',)

我尝试把使用“mock”的地方注释掉:

重启,导出,成功!!!

响应体也不吃意外的同步

总结

1、请求参数 responseType: 'blob'

2、new Blob([res], {type:"application/vnd.ms-excel;charset=UTF-8"})

3、移除“mock”,避免对请求进行劫持从而影响参数

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

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

相关文章

产品推荐 | 基于AMD Virtex 7 FPGA VC709 的高速连接功能开发板

01 产品概述 Virtex™ 7 FPGA VC709 连接功能套件是一款速率为 40Gb/s 的高速平台,您可以通过评估和开发连接功能,迅速为包含所有必要软硬件和 IP 核的高带宽和高性能应用提供强大的支持。它包括一个含有 PCI Express Gen 3、Northwest Logic 公司推出的…

FFmpeg常用API与示例(三)—— 音视频解码与编码

编解码层 1.解码 (1) 注册所有容器格式和 CODEC:av_register_all() (2) 打开文件:av_open_input_file() (3) 从文件中提取流信息:av_find_stream_info() (4) 穷举所有的流,查找其中种类为 CODEC_TYPE_VIDEO (5) 查找对应的解码器:avcodec_find_decoder() (6) …

【Arduino】数字I/O的使用

目录 1、引脚工作模式 2、写入引脚digitaWrite() 3、读取引脚digitalRead(pin); 4、示例 跑马灯 1、引脚工作模式 Arduino通过pinMode()设置引脚的io工作模式,一共有4种模式 工作模式 Mode 说明 输出模式 OUTPUT 引脚为低阻抗状态&…

MQTT学习(二)

订阅主题和订阅确认 SUBSCRIBE——订阅主题 之前的CONNECT报文,分为 固定报头:必须存在,用于描述报文信息。里面有指出什么类型的报文,报文的等级。可变报头:不一定存在。主要看什么样子类型的报文。有效载荷部分&a…

OSU micro-benchmarks安装测试指导

OSU micro-benchmarks安装测试指导 OSU micro-benchmarks工具介绍 OSU Micro benchmark工具是由Ohio State University提供的MPI(Message Passing Interface,消息传递接口)通信效率评测工具。该工具旨在通过执行不同模式的MPI操作&#xff…

力扣75. 颜色分类

Problem: 75. 颜色分类 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 由于题目只提供0,1,2分别代表颜色红、白、蓝,并按此排序,那么我们可以遍历两次数组,第一次将0,全部放到数组前面一部分…

Rumor Remove Order Strategy on Social Networks

ABSTRACT 谣言被定义为广泛传播且没有可靠来源支持的言论。现代社会,谣言在社交网络上广泛传播。谣言的传播给社会带来了巨大的挑战。 “假新闻”故事可能会激怒您的情绪并改变您的情绪。有些谣言甚至会造成社会恐慌和经济损失。因此,谣言的影响可能是深…

计算机网络5——运输层4TCP拥塞控制

文章目录 一、拥塞控制的一般原理二、举例三、理解四、TCP 的拥塞控制方法1、慢开始和拥塞避免 五、主动队列管理AOM1、背景2、介绍3、实现 一、拥塞控制的一般原理 在计算机网络中的链路容量(即带宽)、交换节点中的缓存和处理机等都是网络的资源。在某段时间,若对…

基于MetaGPT的LLM Agent学习实战(一)

前言 我最近一直在做基于AI Agent 的个人项目, 因为工作加班较多,设计思考时间不足,这里借着Datawhale的开源学习课程《MetaGPT智能体理论与实战》课程,来完善自己的思路,抛砖引玉,和各位开发者一起学习&am…

uniapp编译H5解决ios的border-radius失效问题,以及ios满屏显示不全的问题

1.解决方案 .card-itemA {width: 650rpx;height: 326rpx;box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);border-radius: 60rpx;overflow: hidden;// 兼容ios的圆角问题transfor…

5.13作业

使用消息队列实现的2个终端之间的互相聊天 并使用信号控制消息队列的读取方式: 当键盘按ctrlc的时候,切换消息读取方式,一般情况为读取指定编号的消息, 按ctrlc之后,指定的编号不读取,读取其他所有编号的…

计算机毕业设计hadoop+spark+hive知识图谱bilibili视频数据分析可视化大屏 视频推荐系统 预测系统 实时计算 离线计算 数据仓库

研究意义 随着互联网的快速发展,人们面临着海量的视频内容,如何从这些繁杂的视频中找到自己感兴趣的内容成为一个重要的问题[1]。推荐系统作为一种解决信息过载问题的重要工具,能够根据用户的历史行为和偏好,预测用户可能感兴趣的…

【错误的集合】力扣python

最初想法 def findErrorNums(nums):n len(nums)duplicate -1missing -1for num in nums:if nums[abs(num) - 1] < 0:duplicate abs(num)else:nums[abs(num) - 1] * -1for i in range(n):if nums[i] > 0:missing i 1breakreturn [duplicate, missing] 遇到力扣大佬…

废品回收小程序,推动回收行业数字化发展

在垃圾分类、资源回收利用的时代背景下&#xff0c;废品回收行业迅速成长&#xff0c;市场规模逐渐扩大&#xff01; 随着“互联网”应用的普及&#xff0c;废品回收行业也进入到了数字化回收领域&#xff0c;各大回收行业开始专注于发展智能回收。此外&#xff0c;线上废品回…

JavaEE技术之SpringCloud(Nacos注册中心、Nacos配置中心、Sentinel实现熔断与限流)

文章目录 SpringCloud Alibaba1、简介1.1 背景1.2 Nacos主要功能1.3 Nacos和SpringBoot、SpringCloud版本选择 2、Nacos注册中心2.1 案例准备2.2 Nacos注册中心下载启动2.2.1 下载2.2.2 解压启动2.2.3 nacos-server访问测试 2.3 nacos注册中心客户端整合2.3.1 订单服务整合naco…

Linux---windows 机器和远端的 Linux 机器如何通过 XShell 传输文件

一、关于rzsz 这个工具用于 windows 机器和远端的 Linux 机器通过 Xshell 传输文件. 二、下载rzsz软件 用root输入命令&#xff1a; sudo yum install -y lrzsz下载完成&#xff1a; 三、如何传输 有图形化界面 1、从Windows机器传输给远端Linux机器 ① 直接拖拽 直接将…

虚拟机有线已连接但无法上网—·可能性之一

背景 VMware虚拟机&#xff0c;搭建了三台Linux服务器&#xff0c;组成Hadoop集群&#xff0c;由于在Hadoop102上有一些经常与Mysql数据库交互的任务&#xff0c;需要经常打开运行&#xff0c;而Hadoop103和104则经常处于关闭状态&#xff0c;一段时间后再次启动集群时候&…

【vue2项目经验总结:a标签干扰路由】

当我们点击页面中的a标签实现跳转时&#xff0c;会发现网页上方的路由也切换成了a标签的id值&#xff1a; 刷新后页面也会变成空白&#xff1a; 解决方法&#xff1a; 添加Click方法&#xff0c;传入的参数与id值保持一致 scrollIntoView() 方法&#xff0c;将该元素滚动到…

嵌入式学习-时钟树

时钟树 时钟分类 时钟树框图 LSI与LSE HSI、HSE与PLL 系统时钟的产生 AHB、APBx的时钟配置 相关寄存器 寄存器部分的细节内容请参考手册。 相关库函数

配置 IDEA 识别自定义规则的 Dockerfile 文件

目录 配置所在位置解决方案其他 配置所在位置 打开 IntelliJ IDEA&#xff0c;然后转到顶部菜单中的 “File” > “Settings”&#xff08;Windows/Linux&#xff09;或 “IntelliJ IDEA” > “Preferences”&#xff08;macOS&#xff09;。 在弹出的设置窗口中&#x…