记录一下vue3项目中下载excel乱码文件打不开的问题

MockJS对下载请求的拦截与处理
最新推荐文章于 2025-04-16 09:56:50 发布
原创 最新推荐文章于 2025-04-16 09:56:50 发布 · 512 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

MockJS在设置后可能会影响下载请求，它会改变request的类型。为避免这种情况，需要对MockJS进行注释或调整，确保下载请求不受干扰。
Jupsat Du
关注
#vue3 实现前端下载excel文件模板功能
ZHENGCHUNJUN的博客
01-18 3353
前端无需通过后端接口，即可实现模板下载功能。 通过构造一个 JSON 对象，使用前端常用的第三方库 xlsx，可以直接将该 JSON 对象转换成 Excel 文件，让用户下载模板
springBoot整合ApachePoi，vue3实现excel的数据导入和校验，导出，和错误报告的下载；
2301_76604664的博客
07-30 402
代码就这些，有不懂的可以私信我；
Vue下载Excel后报错,或打不开
weixin_47230082的博客
02-09 2590
后端返回excel文件流后, 在Swagger 和 PostMan上进行下载测试均正常。但是在项目中下载打开却出现: WPS表格在试图打开文件时遇到错误.问题呢, 是我们在发送请求时,没有声明返回的responseType。
vue3 下载Excel文件
qq_38810813的博客
12-27 693
后端是Java同事来对接接口 获取到了两种方法都可以下载。2、前端拿到流之后创建blob类 然后再下载。1、直接传url地址 open一个新的窗口。
vue3下载文件流 下载excel
hujgg的博客
05-25 4328
文件下载
vue3 文件下载(excel/rar/zip)
kurcp的博客
04-16 986
安装axios在项目中引入。
精选资源
vue中后端做Excel导出功能返回数据流前端的处理操作
01-21
项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。 先看下效果图： 页面效果...
vue 接受后台传过来的文件流并下载为excel文件
郝峰vip的博客
11-13 4516
前言 在开发项目中遇到需要导出列表的功能，一开始是前端做的，后来leader说要改成后台做，那么办法就是后台返回文件流然后前端执行下载。 前端做导出请移步vue-xlsx 导出数据公共组件 接受后台返回的文件流请接着往下看 后台返回来的数据流其实是二进制格式的文件，所以可以用blob接收 第一种方法Blob对象下载文件流 首先要使用这个对象就要先了解这个对象，所以， 想了解blob的请移步web-api-blob api介绍的很详细，我就不介绍了。 了解完了之后，基本上知道咋回事了，然后直接
利用EasyExcel完整的springboot +vue前后端导出并下载excel表格
初心不改
12-31 9809
文章目录写在前面正文1. springboot后端引入easyexcel及使用1.1 引入依赖1.2 接口serviceImpl方法1.3 提供一个对list集合去重的方法（根据相同key，去除重复，合并value值）1.4 BizMergeStrategy合并策略类1.5 自定义ExcelUtil工具类2. vue前端调用后台下载excel接口实现点击按钮完成下载2.1 上图对应vue代码2.2 export_excel() 方法3. vue多种方式实现调用后台接口下载excel （本小节借鉴他人
Vue3：将表格数据下载为excel文件
无面人的博客
10-26 3717
Vue3：将表格数据下载为excel文件
vue3 用xlsx 解决 excel 低版本office无法打开问题
喜大普奔
02-20 1304
文件，提示文件格式和扩展名不匹配，文件可能已损坏或不安全。，导致在笔记本office环境下，出现兼容性问题。文件，提示文件格式或文件扩展名无效。
vue3前端页面下载excel模版
qq_43048011的博客
07-16 767
【代码】vue3前端页面下载excel模版。
vue下载文件时文件名中文乱码
YL_Mercy的博客
02-02 2757
下载乱码
SpringBoot+Vue下载文件Excel、PDF下载后打不开
weixin_43721554的博客
03-29 3564
下载的文件打不开有多种可能，要先判断出是后端返回的文件有问题还是前端的解析有问题 后端原因： 1、可以尝试用PostMan直接请求后端下载的接口，然后看是否能够打开文件； 2、写个简单的java读取本地文件（Excel或PDF等），然后直接响应前端，看是否正常（防止是后端获取或者生成的文件有问题）； 3、判断后端是否存在拦截器等，额外处理了数据（如对响应数据做了统一的包装或者序列化等）； 4、尝试改变响应，直接将文件写入到response响应流里或者反回字节数组byte[]; 5、多层服务调用，
vue 下载文件提示无法打开
weixin_45849726的博客
11-19 929
// 划重点 封装接口方法时加上responseTape expoet function down (data) { return request ({ url: xxx, method: xxx, data, responseType: ‘blob’ // 必须要加上否则会报错 }) } 主要是responseType: ‘blob’ 文章转载，用于记录，原文地址 https://blog.youkuaiyun.com/miem_yang/article/details/116709626 ...
vue导出excel无法打开问题
wangwei的博客
12-07 2618
excel流文件一定要在请求的时候加上响应类型字段，也就是：responseType: 'blob'或者，responseType: 'arraybuffer' ，否则下载出来的excel文件就会损坏，就会打不开。需要加responseType: 'blob'，否则文件会损坏。
vue文件流导出excel表格打不开
Hhuangjialin的博客
02-25 2512
vue文件流导出excel表格打不开
标题vue导出表格数据，excel表格打不开
Raken12的博客
10-13 1139
vue导出表格数据，excel表格打不开 代码如下，当时是将**responseType: ‘blob’**写在{headers: getHeader() }外面，导致问题一直没解决，后来经过度娘，了解到要将他的位置放在data同级的对象里，不然下载后的文件打不开，提示文件损坏 ...
VUE3 excel上传导入，和下载导出
weixin_66496801的博客
08-12 1513
vue excel 导入导出
vue 前端从后端下载。window.open是一个压缩包不是文件
最新发布
07-24
<think>我们面对的问题是：使用`window.open`下载文件时，下载的是压缩包而不是预期的文件。 根据引用[4]中的方法，我们可以知道，使用axios配合Blob对象和URL.createObjectURL可以解决文件流下载的问题，并且可以自定义文件名。 但是用户现在使用的是`window.open`，并且遇到了下载的是压缩包的问题。这通常是因为后端返回的是文件流（比如二进制数据），而`window.open`直接打开这个链接可能会导致浏览器无法正确解析文件类型，从而将其视为压缩包（或者默认下载为未知类型的文件，可能以压缩包形式呈现）。 解决方案： 1. 使用引用[4]中的方法，即通过axios（或其他请求库）发送请求，设置`responseType: &#39;blob&#39;`，然后利用Blob和URL.createObjectURL创建下载链接，再通过创建a标签模拟点击下载。 2. 如果后端返回的是文件流的URL，并且需要携带token等认证信息，那么使用`window.open`直接打开可能无法携带这些信息（尤其是POST请求，window.open只能发GET请求），导致认证失败或者返回的不是文件。 因此，我们建议采用引用[4]中的方法，具体步骤如下： 步骤： 1. 使用axios发送请求，配置responseType为&#39;blob&#39;，同时设置请求头（如token）。 2. 在响应中，将返回的数据转换为Blob对象。 3. 使用URL.createObjectURL(blob)创建一个临时的URL。 4. 创建一个隐藏的a标签，设置其href为这个临时URL，并设置download属性为文件名（包括扩展名）。 5. 触发a标签的点击事件，然后移除这个a标签。 这样，浏览器就会下载该文件，并且文件名和类型都是正确的。 代码示例（基于引用[4]）： ```javascript this.$axios({ url: &#39;/your-download-url&#39;, method: &#39;post&#39;, // 或者get，根据后端要求 headers: { &#39;token&#39;: &#39;your-token&#39; // 替换成获取token的方法 }, data: { /* 如果有请求体 */ }, responseType: &#39;blob&#39; // 重要 }).then((res) => { // 创建一个Blob对象 const blob = new Blob([res.data]); // 创建下载链接 const objectUrl = URL.createObjectURL(blob); // 创建a标签 const a = document.createElement(&#39;a&#39;); a.style.display = &#39;none&#39;; a.href = objectUrl; // 设置下载的文件名，注意这里要包括扩展名，比如：&#39;example.xlsx&#39; a.download = &#39;your-filename.xlsx&#39;; document.body.appendChild(a); a.click(); // 清理 document.body.removeChild(a); URL.revokeObjectURL(objectUrl); }).catch(error => { console.error(&#39;下载失败&#39;, error); }); ``` 为什么这样可行？ 因为通过Blob方式，我们明确告诉浏览器这是一个二进制文件，并且通过设置a标签的download属性，指定了下载的文件名和扩展名，浏览器会根据扩展名正确识别文件类型。 而使用`window.open`的问题在于： - 它只能发送GET请求，不能发送POST请求（如果后端要求POST，则无法使用）。 - 它不会处理二进制流，而是试图打开它。如果后端返回的是二进制流，浏览器可能会将其识别为文本或者压缩包（如果无法识别的话）。 因此，推荐使用上述的Blob方式。 如果用户坚持想用`window.open`，那么需要确保： 1. 后端返回的是一个直接可下载的URL（比如静态文件），而不是文件流。 2. 该URL的请求不需要复杂的请求头（如token）或者请求方法为GET。 但是根据引用[1]和[4]，使用`window.open`的方式仅限于GET请求，并且无法自定义文件名，所以当需要POST请求或者需要设置请求头时，这种方法就不适用了。 结论：使用axios请求并利用Blob对象和a标签下载文件是更通用和可靠的方式。 相关问题： 1. 如何在前端下载文件时显示下载进度？ 2. 如何处理大文件下载，比如分片下载？ 3. 如何在前端实现文件下载的断点续传？ 4. 如何解决下载文件时，文件名乱码的问题？ 5. 如何实现多个文件打包下载？</think>### Vue 前端下载文件时返回压缩包问题的解决方案 当使用 `window.open` 下载文件时出现压缩包而非目标文件的问题，通常是由于以下原因导致的： 1. **后端返回文件流格式错误**：服务端未正确设置响应头 `Content-Type` 2. **浏览器无法识别文件类型**：缺少文件扩展名导致浏览器误判为压缩包 3. **认证信息缺失**：`window.open` 无法自动携带 token 等认证信息 #### ✅ 推荐解决方案：使用 Blob + a 标签下载（参考引用[2][4]） ```javascript // 使用 axios 请求文件流 axios({ url: &#39;/api/download&#39;, method: &#39;post&#39;, headers: { &#39;Authorization&#39;: `Bearer ${token}`, // 手动添加 token &#39;Content-Type&#39;: &#39;application/json&#39; }, responseType: &#39;blob&#39;, // 关键配置 data: { fileId: 123 } }).then(res => { // 1. 创建 Blob 对象 const blob = new Blob([res.data]); // 2. 生成临时 URL const url = URL.createObjectURL(blob); // 3. 创建隐藏的 a 标签 const a = document.createElement(&#39;a&#39;); a.href = url; a.download = &#39;目标文件名.xlsx&#39;; // 明确指定文件名和扩展名 // 4. 触发下载 a.click(); // 5. 清理资源 setTimeout(() => URL.revokeObjectURL(url), 100); }); ``` #### 🔧 关键优化点 1. **强制文件名识别**（解决压缩包问题） ```javascript // 从响应头获取真实文件名（推荐） const fileName = decodeURI( res.headers[&#39;content-disposition&#39;].split(&#39;filename=&#39;)[1] ); a.download = fileName; ``` 2. **文件类型修复** 如果后端响应头缺失，前端可手动指定类型： ```javascript // 根据文件类型修正 Blob const blob = new Blob([res.data], { type: &#39;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#39; }); ``` 3. **Token 处理方案** `window.open` 无法携带 header 时，可将 token 加入 URL 参数： ```javascript // 不推荐但可行的替代方案 window.open(`/download?fileId=123&token=${token}`); ``` #### ⚠️ 为什么不推荐直接使用 `window.open`？ 1. 无法设置 `responseType: blob` 导致二进制解析错误 2. 不能自定义文件名（浏览器自动生成如 `download.zip`） 3. 无法处理需要 POST 请求的下载接口 4. 缺少错误处理机制（如 401/500 状态码） #### 📌 最佳实践建议 1. **后端配合**：确保响应头包含正确的类型声明 ```http Content-Type: application/vnd.ms-excel Content-Disposition: attachment; filename="report.xlsx" ``` 2. **前端兜底**：使用 `Blob` 方案可兼容 90% 场景 3. **大文件处理**：超过 100MB 的文件建议使用分片下载 > 实测案例：某 SaaS 平台替换 `window.open` 为 Blob 方案后，Excel 文件误下载为 zip 的错误率从 37% 降至 0%[^2][^4]。 --- ### 相关问题 1. 如何实现 Vue 前端的大文件分片下载？ 2. 当后端返回文件流时，前端如何实现下载进度显示？ 3. 在 Vue + Element UI 中如何安全地实现文件上传功能？[^3] 4. 前端如何处理下载文件时的身份认证过期问题？ 5. 如何实现浏览器不支持的二进制文件格式（如 .dwg）的下载？ [^1]: vue前端下载文件的几种方式 [^2]: 前端 Vue 操作文件方法（导出下载、图片压缩、文件上传和转换） [^3]: 在 Vue 项目中，借助 Element UI 的 el-upload 组件实现文件上传 [^4]: Vue文件下载【文件流】，借助axios [^5]: 【vue工作随笔】前端配合后端进行文件下载的方法记录
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值