根据后端返回文件流，前端导出文件损坏怎么办前端设置了 responseType:‘blob‘还是文件损坏怎么办（踩坑记录）

已于 2023-12-14 09:05:47 修改
阅读量287 收藏
点赞数 1
文章标签： 前端
于 2023-12-14 09:03:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L7710142112/article/details/134986448
版权

后端返回文件流，前端如何接收处理（踩坑记录）

一、问题背景

通过 Postman 调用 API 时返回的 buffer 正常，下载下来的 Excel 也能正常打开，数据正常，但是在 Vue 项目中导出的 Excel 却报错 “文件已损坏，无法打开”

但是在vue项目中导出文件却打不开

然后在前端去接收这个blob，去下载的时候，我的是这么写的

我感觉我的写法没有问题，也能正常导出但是发现导出的文件一直损坏。我去百度搜了几篇它说是需要在axios里面添加responseType为blob才行但是我已经添加还是不行还是打不来下载下来的文件我又开始想会不会是后端返回的数据流有问题，然后我又去找后端对数据格式但是发现还是不行，后来我发现在打印后端返回的数据的时候responseType是空的但是我已经设置了

终于让我找到问题的原因我发现当我请求的时候mock.js会进行一次拦截

当我关闭了这个mock;拦截就好了

问题完美解决！！！ 奉劝各位谨慎用mock！！！

Libars
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
常用文件流下载文件（ Blob）时各种类型文件的 type
02-09
常用文件流下载文件（ Blob）时各种类型文件的 type
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端导出功能所需文件Blobjs
07-16
前端导出功能所需文件Blobjs
前端文件导出设置responseType为blob时遇到的问题
weixin_46018417的博客
02-15 6427
导出文件接口返回code和msg如何获取。
使用responseType: “blob“请求文件流时拦截报错信息
Dalin0929的博客
02-23 2076
使用responseType: "blob"请求文件流时拦截报错信息
前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题
最新发布
Amelian的博客
01-16 3091
本是一个非常简单的请求，即是下载文件。通常的做法如下：1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）3.前端创建a标签进行下载如果后端返回的是文件的地址，那么前端可以直接通过加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。
【采坑分享】导出文件流responseType:“blob“如何提示报错信息
happy921212的博客
11-24 1933
近日业务中导出按钮需要直接下载接口中的文件流，导出文件流responseType:"blob"如何提示报错信息？方法如下……
responseType为blob的请求，如何获取错误信息
热门推荐
weixin_41722909的博客
02-01 1万+
一个请求如下： axios({ method: 请求方式, url: 接口路径, data: 接口参数, dataType: 'json', responseType: 'blob', headers: { // 项目中请求头需要的信息（如果不需要可不写），如用户登录信息验证： authorization: localStorage.getItem('authorization') } }).then(response => { }).catch(err
Vue+token+blob+实现下载文件时验证
wuuconix's blog
03-11 962
Vue+token+blob+实现下载文件时验证 之前在写/api/download的时候只写了这么一句话 router.get('/download', (req, res) => { req.query.filename ? res.download(`./files/wuuconix/${req.query.filename}`) : res.send({ message: 'failed to download file' }) })
Postman教程-Response相关的基本操作
专注测试领域知识分享和技能提升
02-25 3202
从postman中发送一个请求后，在response信息的查看区域可以看到如下的相关信息：从页面可以看到请求发送出去后的响应时间，响应状态码，响应结果等信息，也可以在页面将本次请求的结果保...
blob导出的excel文件打不开，responseType: “blob“ 但 response回应类型不是blob类型，response.data是乱码。
Ahuuua的博客
11-10 1万+
【问题描述】 使用blob导出.xlsx文件打开后出错，如下： WPS表格 在试图打开文件时遇到错误。请尝试以下方法。 检查文档或驱动器得到访问权限。 确保有足够的内存和磁盘空间。 确保此文件是可以识别的格式。 前端查看response响应值如下： 可以看出，response.data是一串乱码，并不是自己要求的blob类型。 这串乱码被放到了.xlsx文件中当然就打不开拉。可以用notepad++打开导出的.xlsx文件，就是这串乱码。 response.data的值如下
postman设置Response返回默认json格式
qq_36403438的博客
11-30 6182
1、在postman工具，点击右上角“设置”图案，选择“Settings”； 2、在设置窗口，选择“General - Language detection”，设置JSON，即可
postman响应和环境
myinghua的博客
08-30 1662
postman响应和其他功能
前端下载后端文件流，文件可以下载，但是打不开，显示“文件已损坏”的问题分析与解决方案
前端小白, 稀土：雩风十六
11-04 2871
前端下载后端文件流，xlsx文件可以下载，但是打开显示“文件已损坏”的处理方案
后端返回文件流，前端导出文件损坏怎么办（踩坑记录）
weixin_42770320的博客
09-25 1582
这个问题还是花了我两天才解决，虽然不是什么很难的事情，但是这一个过程中还是学到了很多东西，也有了启发，一个问题的出现就会带动我全身的一个细胞，不停为了解决问题而分析，搞技术就是这样，遇到问题一定要学会去分析问题，定位到具体的问题，然后再解决它，最后总结一下，为什么会遇到这种问题，这种问题遇到之后的一个解决思路是什么，后面如何规避在出现这种问题。目前的导出很简单，只有这些代码，然后在我的apifox里面测试也是正常的，导出来的效果是这样的。记录时间：2023.9.25 11:27。话不多说，直接看代码！
vue2文件流下载成功后文件格式错误、打不开、内容缺失
Salt_NaCl的博客
02-14 5652
文档流问题
后端返回文件流 前端导出
08-28
您好！对于后端返回文件流并由前端导出的需求，您可以按照以下步骤进行操作： 1. 后端传输文件流：在后端，您可以使用合适的编程语言和框架，将文件以流的形式返回给前端。根据您使用的具体技术栈，可能会有不同的方法来实现这一点。 2. 前端接收文件流：前端需要通过合适的方式接收后端返回的文件流。通常情况下，可以使用浏览器的内置 API（如 Fetch API 或 XMLHttpRequest）来发起请求并接收文件流。 3. 将文件流导出：一旦前端成功接收到文件流，您可以使用合适的 JavaScript 库或框架来处理并导出文件。常见的方法是创建一个 `<a>` 标签，并为其设置 `href` 属性为文件流的 URL，再调用 `click()` 方法以触发下载。 以下是一个简单的示例，演示了如何在前端导出后端返回的文件流（以 CSV 文件为例）： ```javascript // 后端返回文件流 fetch('/api/getFile', { method: 'GET', }) .then(response => response.blob()) // 将响应转换为 Blob 对象 .then(blob => { // 创建下载链接 const downloadLink = document.createElement('a'); downloadLink.href = window.URL.createObjectURL(blob); downloadLink.download = 'file.csv'; // 设置下载文件的名称 // 触发下载 downloadLink.click(); }) .catch(error => { console.error('导出文件失败:', error); }); ``` 请注意，这只是一个示例，并不能适用于所有情况。根据您的实际需求和技术栈，可能需要进行适当的调整和修改。希望对您有所帮助！如果您有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值