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

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

背景

前端导出的文件流乱码,此时确定非后端问题(可以在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”,避免对请求进行劫持从而影响参数

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

黑马基于Web-socket的java聊天室基本解析

要是用Web-socket协议&#xff0c;我们要前端upgrade升级成web-socket协议 首先我们要引入springboot的websocket起步依赖&#xff0c;这样子方便使用&#xff0c;自己指定版本注意 <dependency><groupId>org.springframework.boot</groupId><artifactId&…

2种方法教你快速完成图片格式转换!

在数字世界中&#xff0c;图片是我们传递信息和表达创意的重要媒介。然而&#xff0c;不同的应用场景需要不同格式的图片。例如&#xff0c;网页设计可能需要使用PNG格式&#xff0c;而打印则需要使用JPG或PDF格式。这就需要我们经常进行图片格式转换。 下文小编将分享2种方法…

Ubuntu搭建VsCode C++ 开发环境

Ubuntu搭建VsCode C 开发环境 安装VS Code 使用命令来安装VS Code&#xff1a;他会下载vscode的最新版本。 sudo snap install --classic code如果不使用命令 的方式 在官网下载vscode安装包&#xff08; 后缀为 .deb的包 &#xff09;之后&#xff08;可以选择版本 &#x…

【JavaEE精炼宝库】多线程1(认识线程 | 创建线程 | Thread 类)

目录 一、认识线程 1.1 线程的概念&#xff1a; 1.2 为什么需要线程&#xff1a; 1.3 面试题.谈谈进程和线程的区别&#xff1a; 1.4 Java的线程和操作系统线程的关系&#xff1a; 二、创建线程 2.1 创建线程的5种写法&#xff1a; 2.1.1 写法1.继承 Thread 类&#xf…

codeforces round944(div4)A~F题解

文章目录 [A. My First Sorting Problem](https://codeforces.com/contest/1971/problem/A)[B. Different String](https://codeforces.com/contest/1971/problem/B)[C. Clock and Strings](https://codeforces.com/contest/1971/problem/C)[D. Binary Cut](https://codeforces…

5.10.10 用于图像识别的深度残差学习

1. 介绍 深度卷积神经网络为图像分类带来了一系列突破。深度网络自然地以端到端的多层方式集成低/中/高级特征和分类器&#xff0c;并且特征的“级别”可以通过堆叠层的数量&#xff08;深度&#xff09;来丰富。 学习更好的网络是否像堆叠更多层一样容易&#xff1f; 这个问…

网络工程师----第二十七天

计算机基 第四章&#xff1a;网络层 网络层提供服务的特点&#xff1a;网络层向上只提供简单的、无连接的、尽最大努力交付的数据报服务&#xff0c;不保证可靠通信。 网际协议IP&#xff1a; *地址解析协议ARP(Address Resolution Protocol) *网际控制报文协议ICMP(Inter…

分享一个非常好用的安装包下载网站

当我们需要下载linux下的某些包,以便在自己的环境下进行编译自己的安装包的时候,可能需要用到一些各种版本的依赖包,从网上 百度会很麻烦。 这里分享一个很好用的安装包下载网站,记得点赞收藏 网站: Red Hat Enterprise Linux Repositories - pkgs.org 找到对应系统,然…

【Java的抽象类和接口】

1. 抽象类 1.1 抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果 一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。 以上代码中…

4.Jmeter阶梯加压Stepping Thread Group

1. 先去Jmeter下载地址下载PluginsManager&#xff0c;放置在Jmeter的lib/ext 目录下 &#xff0c;重启Jmeter 2. 在插件管理器查找并安装jpgc - Standard Set,重启Jmeter 3.右键测试计划->添加->Threads(Users)->jpgc - Stepping Thread Group 然后设置阶梯加压参数…

【保姆级教程】如何将火爆全网的Kimi接入微信公众号,成为你的专属AI智能客服

【保姆级教程】如何将火爆全网的Kimi接入微信公众号&#xff0c;成为你的专属AI智能客服 在数字化转型的浪潮中&#xff0c;企业越来越重视利用人工智能技术提升客户服务的效率和质量。Kimi 作为一款功能强大的AI智能助手&#xff0c;能够理解自然语言、提供信息搜索、解析网址…

图像/视频恢复和增强CodeFormer

github&#xff1a;https://github.com/sczhou/CodeFormer 尝试增强旧照片/修复人工智能艺术 面部修复 面部色彩增强和恢复 脸部修复

[XYCTF]-PWN:Intermittent解析(pop栈内数据构造shellcode,自己编写shellcode)

查看ida 这里程序只会把输入的前12字节内容移到虚拟地址里&#xff0c;然后执行&#xff0c;大小不足以让执行shellcode&#xff0c;只能用pop寄存器调用read&#xff0c;再把gets hell的shellcode输入进去 完整exp&#xff1a; from pwn import* context(log_leveldebug,arc…

【数据结构】平衡二叉树(插入、查找、删除)解析+完整代码

3.2 平衡二叉树 3.2.1 定义 平衡二叉树&#xff0c;简称平衡树&#xff08;AVL树&#xff09; 树上任一结点的左右子树高度差不超过1。 结点的平衡因子左子树高-右子树高 3.2.2 插入操作 插入结点后&#xff0c;可能造成不平衡 要调整最小不平衡子树&#xff0c;使其恢复平衡。…

Python以docker形式部署,flask简易服务器。

公司大部分都是springboot 服务器&#xff0c;有时候用到python写的一些模型&#xff0c;部署在linux上进行处理 首先项目这样&#xff1a; flask就不说了&#xff0c;快捷服务器&#xff0c; # -*- coding: utf-8 -*-from flask import Flask, request# 实例化Flask对象 app…

齐护K210系列教程(二十六)_口罩检测

口罩检测 1.下载模型1.1使用机器码下载模型1.2将模型文件下载到SD卡1.3 烧录基本固件 2.程序解释3.课程资源联系我们 要实现此程序的功能需要&#xff1a; 支持 kmodelv4 支持固件 人脸口罩检测模型的模型 模型下载地址为&#xff1a;https://maixhub.com/model/zoo/64 机器码…

简单4步教你电脑摄像头怎么打开!

电脑摄像头是现代计算机的一个重要组件&#xff0c;它为我们提供了进行视频通话、视频会议、拍摄照片和录制视频等功能。然而&#xff0c;对于一些用户来说&#xff0c;不清楚电脑摄像头怎么打开。在本文中&#xff0c;我们将介绍几个简单的步骤&#xff0c;帮助您在电脑上轻松…

易康001:易康多尺度分割结果异常

前言 易康是一种在遥感领域常用的数据处理软件&#xff0c;它主要是用于面向对象的分类&#xff0c;涵盖了分割、模糊分类、监督分类等流程。但是在进行多尺度分割时&#xff0c;往往会遇到一些问题&#xff0c;例如下面图片所示&#xff1a; 1 多尺度分割问题 这种问题一般是…

【C++】AVL

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、AVL 树 1.1、AVL树的概念 1.2、AVL树节点的定义 1.3、AVL树的插入 1.4、AVL树的旋转 1.4.1、新节点插入较高左子树的左侧---左左&#xff1a;右单旋 1…

深度论证-高速走线控制100欧姆阻抗一定是最好的选择吗?

高速先生成员--黄刚 对于高速差分信号到底需要控制多少欧姆的阻抗&#xff0c;高速先生相信大部分工程师首先都会看下例如信号的协议文档或者芯片的文档&#xff0c;看看里面有没有推荐的控制阻抗值。例如像PCIE信号&#xff0c;在4.0之后的阻抗会明确要求按照85欧姆来控制&…