文件流下载文件后提示不支持打开该类型文件或文件已损坏

在react项目中用到下载，请求后端接口返回文件流，前端来处理文件流生成文件后下载。

要设置responseType！！

采用的方法就是百度上随便一搜就可以搜到的Blob方法，最开始要下载的文件格式为.pdf，但是下载完的文件用office和WPS都打不开，先说怎么解决的这个问题，之前在百度的时候也看到有人说设置responseType就可以了，但是不信邪，就不设置，结果还真的是因为responseType，设置之后下载完的文件就都可以打开啦！

解决思路：
1、先让后端把文件流传的文件变成一个空白文档，首先可以确定的是下载没问题，可以下载下来文件，并且空白的文件是可以用Office打开的，文件流应该也没问题
2、用模拟请求的工具尝试了一下，下载的文件也可以正常打开，那么文件流一定没问题，问题应该就出在前端了
3、后端提供了其他项目下载的方法，使用的是layUI框架的，代码如下

//文件下载
function downLoadFile(ids, name) {//创建下载请求var oReq = new XMLHttpRequest();//url参数为拿后台数据的接口oReq.open("POST", '请求的下载地址', true);oReq.responseType = "blob"; //设置responseTypeoReq.onload = function (oEvent) {var content = oReq.response;var elink = document.createElement('a');//name为后台返给前端的文件名，后缀名必须加，后台有返回后缀就不用管，不然下载在本地不好打开。elink.download = name + ".xlsx";elink.style.display = 'none';var blob = new Blob([content], {type: "application/x-www-form-urlencoded"});elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);};oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//这个相对来说都不是很重要//请求头里放入用户口令，必须在.open()和.send()之间设置oReq.setRequestHeader('Blade-Auth', '设置balde-auth');oReq.send('可以设置需要的参数');
}

我写的代码如下

//请求完接口后调用该方法 将文件流data和其他需要的数据参数传过来
saveData(data, filename) {let blob = new Blob([data], { type: 'application/x-www-form-urlencoded' });let blobUrl = window.URL.createObjectURL(blob);const aElement = document.createElement('a');document.body.appendChild(aElement);aElement.style.display = 'none';aElement.href = blobUrl;aElement.download = filename;aElement.click();document.body.removeChild(aElement);
}

看起来代码就是一样的嘛，只不过我的接口请求是axios封装后的，balde-auth也在封装部分设置好了，看来看去只有一处不同，那就是没有设置responseType，我甚至还试了一下没用封装的接口请求，直接就用最上面的代码也是好使的，那就是responseType的问题了，在axios封装里面加上了responseType就可以了。

/*** 设置请求拦截器，添加token*/
axios.interceptors.request.use(config => {if (config.method === 'post') {if(config.url.includes(url.common.filedownload)){config.responseType = 'blob'; //请求加上responseType}}return config},error => {message.error('请求出错' + error);return Promise.reject(error);}
)

告诉请求前端想要的是blob的就可以了

文件流下载文件后提示不支持打开该类型文件或文件已损坏相关推荐

PHP使用文件流下载文件方法（附：解决下载文件内容乱码问题）
记得高中时候做过游戏私服,那时候的游戏主页是用PHP写的,因为文件很固定,客户端,登陆器和一些小工具,文件数目也不是很多,所以都是直接把下载链接写死的,直接链接到本地服务器的文件目录,今天QQ群有个朋 ...
如何利用php下载文件_PHP使用文件流下载文件方法
1.flush - 刷新输出缓冲 2.ob_clean - 清空(擦掉)输出缓冲区注:上面2个函数可以解决PHP下载文件内容乱码 DEMO :<?php //fname为要下载的文件名 //$ ...
用文件流下载文件（ Blob）时各种类型文件的 type 整理
在 VUE 项目中,常用 Blob 二进制数据做文件下载的功能,涉及不同后缀的文件,但是每当设置转换的文件类型的时候就很头疼,因为这东西平时也不怎么常见,这里我参考 Blob 配置整理了一份,方便以后 ...
ajax文件流下载文件之避坑指南
公司一个老项目前端请求用的jquery的ajax,下载文件需要传用户信息所以没办法用window.location.href下载,用项目里面jquery的ajax下载,下载的压缩文件一直是下载下来解压 ...
【Kotlin 协程】Flow 异步流 ② ( 使用 Flow 异步流持续获取不同返回值 | Flow 异步流获取返回值方式与其它方式对比 | 在 Android 中使用 Flow 异步流下载文件 )
文章目录一.使用 Flow 异步流持续获取不同返回值二.Flow 异步流获取返回值方式与其它方式对比三.在 Android 中使用 Flow 异步流下载文件一.使用 Flow 异步流持续获取 ...
前端下载 “不支持打开该类型文件或文件已损坏“问题
最开始做下载功能的时候,是模仿项目中已有的写法来实现的,这套模板应该可以适应大多数的下载,网上很多也是这种写法: .then(res => {// res 为调用后端下载接口返回的值const ...
删除流氓软件的心得（找到文件路径无法删除系统提示：该操作无法完成，该文件被其他进程正在使用）
缘由:自己不在家电脑被一个小白用了一下结果电脑多了十几个流氓软件发现之后采用了偷懒的方式直接利用软件管理把最近安装的软件都卸载了原本以为万事大吉过了一段时间出现了一个垃圾锁屏软件贪玩游 ...
c语言程序无法打开文件,C语言fopen()总是提示无法正常打开文件
问题: 在windows系统命令行中运行编写的程序时,总是提示无法正常打开文件. 程序如下: //reducto.c //reduce the original file by 2/3 #includ ...
怎么解决抖音小程序扫码,跳转时提示:不支持打开该协议类型：snssdk1128
如果在使用抖音小程序时出现了"不支持打开该协议类型:snssdk1128"的提示,那么可以尝试以下解决方案: 确保你的抖音小程序版本是最新的,如果不是,请尝试更新小程序. 如果更新 ...

文件流下载文件后提示不支持打开该类型文件或文件已损坏

文件流下载文件后提示不支持打开该类型文件或文件已损坏相关推荐

最新文章

热门文章