vue + axios 通过blob 转换excel文件流 下载乱码问题

最新推荐文章于 2025-09-24 11:38:22 发布
原创 最新推荐文章于 2025-09-24 11:38:22 发布 · 1w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue下载excel #axios文件流乱码

本文探讨了使用axios过程中遇到的数据乱码现象，并指出在尝试利用axios的拦截器进行处理时仍然存在问题，目前尚未找到有效的解决方案。

 

* 不能用axios 封装的拦截器，用axios的拦截器时候还是会出现乱码的情况（暂时还没找到处理的方法）

 

vue 使用Blob、Export2Excel实现导出excel（简单快捷）
sout-lanys
03-07 1682
vue 实现Blob、Export2Excel导出excel（简单快捷）
Vue + iView + axios 通过Blob数据流下载Zip文件，解决数据流乱码问题
qq_36649922的博客
06-01 1502
在通过vue + iView + axios实现通过Blob下载Zip文件时，我遇到了一个问题，就是下载的Zip文件里面要么是空字符的的破损文件，把Blob数据流打印出来发现乱码。 遇到问题，
Vue中导出excel表格,通过Blob.js
11-28
关于Vue中导出excel表格需要用到的Blob.js，如有需要的可下载。
axios响应模式：stream/blob/arraybuffer全解析
最新发布
gitblog_00898的博客
09-24 474
在JavaScript异步编程领域，HTTP响应处理一直是性能与用户体验的关键瓶颈。当面对大型文件传输、实时数据流或二进制数据处理时，开发者常常陷入两难：完整加载数据会导致内存占用过高，而分块处理又面临复杂的状态管理。Axios作为基于Promise的HTTP客户端库，提供了stream（流）、blob（二进制大对象）和arraybuffer（数组缓冲区）三种高级响应模式，为解决这些问题提供了优雅...
Vue通过Blob对象实现导出Excel功能示例代码
10-15
主要介绍了Vue通过Blob对象实现导出Excel功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
axios导出Excel文件乱码
XinYe666666的博客
11-23 652
解决方案一: axios({ method: method, headers: { 'Content-Type': 'application/json; application/octet-stream' }, url: root+url, params:parm, data: data, responseType: 'arr...
excel表格 乱码 前端 data blob 暂时没懂
hery186的专栏
06-05 621
？？？
Vue+axios+WebApi+NPOI导出Excel文件实例方法
01-19
一、前言 项目中前端采用的Element UI 框架， 远程数据请求，使用的是axios，后端接口框架采用的asp.net webapi,数据...2.采用axios请求接口，先在筛选后的数据服务端生成文件并保存，然后返回远程文件地址，再采用
vue+axios导出文件(excel)
你一个人,就不想到别处看看? ---- 我怕一转身连你也不见了......
06-10 2305
1.请求类型需要设置为: responseType:blob或者为arraybuffer,这个默认是json export function exportExcel(params) { return request({ url: process.env.ADMIN_API + '/api/admin/token/blog/export', method:'post',...
vue+axios 下载二进制流文件及兼容MacOS问题
黑山老妖的小站
03-16 575
vue项目中需要实现下载文件，后端不是给到文件地址，而是返回二进制文件流。 相关知识： 后端响应给我们二进制流文件，我们需要拿到相关信息并创建一个a标签并实现click，然后给下载的文件起个名字。 给下载文件起名字有两种方式：（1）固定值+时间戳（一般都加上时间戳） （2）后端将文件名放到response的headers中返回，我们取值当做文件名。我们此次需求为第二种，名称后端定。 后端...
vue使用axios从后端接口导出excel表格下载到本地
longxianhua的博客
02-20 1015
部分后端导入是返回的文件流 需要额外做处理 这里给自己记录一下方法： facade.baseRule.exportExcelRules(params).then((res) => { let blob = new Blob([res.data], {type: res.data.type}) const fileName = '告警自动智能预处理触发配置.xls'; let downloadElement = d
vue实现导出Excel的两个js文件-Blob+Export2Excel
11-06
vue实现导出的两个js文件-Blob+Export2
Vue通过Blob对象实现导出Excel功能（2种方法）
好记性，不如烂键盘。
08-16 6236
控制台输出的可以看到是个正确的Blob对象，这就说明我们的配置是对的。'responseType'表示的是服务器响应的数据类型，可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream'，默认为json。但是有些需求因为数据量太大，成千上万条数据，所以是需要后端拼接，然后输出二进制流文件，然后前端直接下载，这次我们谈谈后者的做法。后端最好也要配置response头的content-type为对应的类型。扩展名----------MIME类型。
前端通过blob导出数据为excel，导出文件大小不受2m限制
renkind的博客
01-07 2890
不bb，先上代码 $http({ method: 'GET', url: apiUrl, dataType: 'json', async: true, headers: { ...
vue 导出 Excel（基于Blob.js和Export2Excel.js）
我是小鹏呀的博客
02-19 713
2.项目中新建一个文件夹，里面放置 Blob.js和 Export2Excel.js。
导出，文件下载跳转到excel表格（使用blob）
bbkhhvv的博客
12-12 524
使用blob属性进行文件下载功能
blob形式导出Excel
sophia
12-17 2322
export function getParticipantList(param) { return ecloudRequest({ url: "", method: "get", params: param, responseType: param.isExport ? 'blob' : '' }); } 接口返回处理 const blob = new Blob([res]) const fileNa
csv文件怎么转成excel_Excel导入CSV文件乱码？两个小方法让文件正常显示
热门推荐
weixin_39996134的博客
11-18 1万+
最近网友抱怨，收到别人发来的数据表，打开后长这样：CSV再EXCEL中显示为乱码除了数字，其他是啥玩意儿完全乱码。。。(乱码！乱马！乱吗？乱！)但是当使用记事本打开，检查确认是否文件有问题时，显示完全正常，根本没有乱码。CSV在记事本中显示正常用最最普通记事本打开文件能够正常显示，用Excel打开却显示不正常。。。这是怎么回事？(乱马也在想...)难道没安装好需要卸载重装？(走投无路的招数，然并卵...
解决vue2.x导出blob流的excel乱码问题
alonesupermen的博客
05-10 1583
项目场景： 解决vue2.x导出excel乱码的问题~~~~~ 采用的UI框架的vuetify—,vue版本是2.x,导出excel是后端返回blob流，前端通过a标签下载 问题描述 注释mock,requestType: blob, 文件类型都试过了，反正下载下来乱码，后端测试下载是完全Ok的。 下面说下解决办法，这个办法是和后端协商解决的，具体咋处理，就不知道了，发表此文章的目的在于记录奇怪bug, 加了个请求头Download-Request //这个是请求 axios() .post
如何解决Vue项目中通过axios下载文件时，文件名称出现中文乱码的问题？
12-04
在Vue项目中，当使用axios下载文件时遇到中文文件名乱码问题，通常可以通过设置请求头的`Content-Type`和服务器响应头的`Content-Disposition`来解决。以下是具体的步骤： 1. **设置请求头**: 在发送文件下载请求时，确保添加正确的字符编码头，例如： ```javascript axios.get(fileUrl, { responseType: 'blob', headers: { 'Accept': 'application/octet-stream' }, // 或者 'Accept-Encoding': 'gzip, deflate' transformRequest: [function (data) { return new Blob([data], { type: 'application/octet-stream' }); // 设置Blob的type为二进制流 }], }) .then(response => { let urlObject = window.URL.createObjectURL(response.data); let aLink = document.createElement('a'); aLink.href = urlObject; aLink.download = decodeURIComponent(fileFileName); // 使用decodeURIComponent解码中文文件名 aLink.click(); }); ``` 2. **设置服务器响应头**: 如果文件是由服务器生成的，需要确保服务器返回响应头时设置了正确的文件名编码，如： - 对于Node.js服务器，可以使用`res.setHeader('Content-Disposition', 'attachment; filename*=UTF-8\'\'%E6%96%87%E4%B8%BB%E5%9B%BE.jpg')`； - 对于Nginx服务器，可以在location配置里加入类似`add_header Content-Disposition attachment; filename "$filename";`，其中`$filename`会被服务器自动替换为响应内容的文件名。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值