首页 > 其他分享 >vue 解决 post请求下载文件,下载的文件损坏打不开,结果乱码

vue 解决 post请求下载文件,下载的文件损坏打不开,结果乱码

时间:2023-06-25 17:55:34浏览次数:33  
标签:文件 console 请求 url 乱码 response 下载 log

axios.post('xxx', {
    responseType: 'blob' //指定返回数据的格式为blob
})
.then(response => {
    console.log(response);//把response打出来,看下图
    let url = window.URL.createObjectURL(response.data);
    console.log(url)
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
            a.download = '2.xls';
            a.click();
            window.URL.revokeObjectURL(url);
})
.catch(err => {
    console.log(`接口调用失败`);
    
    console.log(err);
})

现象:

1。postman请求下载文件正常

2。js代码在别的项目中下载正常

3。js代码在本项目中下载的excel打开提示文件损坏。

原因:

  项目中前期引入了 mockjs 进行模拟数据请求。导致请求结果被mock拦截,修改了返回数据类型。

 

下面是mock拦截修改后的返回对象,data变成string类型,显示为乱码。返回的请求为MockXMLHttpRequest类型

注释到 mockjs的引用后,data类型为正常的blob类型

结果发现,
1.谷歌浏览器下载,office打不开。
2.QQ浏览器谷歌内核下载,postman下载,office打开提示修复,点击确定,正常显示数据。
3.谷歌浏览器下载,wps正常打开,也没有修复提示。

经过分析,是后台返回的数据流里面带有接口请求状态等信息,让后台去掉后就正常了。

标签:文件,console,请求,url,乱码,response,下载,log
From: https://www.cnblogs.com/yuluochengxu/p/17503583.html

相关文章

  • EFI分区(也称为EFI系统分区或ESP)是一种特殊的分区,通常用于存储引导加载程序和其他与引
    EFI分区(也称为EFI系统分区或ESP)是一种特殊的分区,通常用于存储引导加载程序和其他与引导相关的文件。它是为了支持基于UEFI(统一固件接口)的系统而设计的。下面是一些理由说明为什么需要EFI分区:引导启动:EFI分区中存储着操作系统的引导加载程序(如GRUB、WindowsBootManager等)和相关......
  • Linux 文件系统 | mount & umount
    Linux中一切皆文件并且所有文件都统一在/根目录下面类比windows系统,插入U盘,或者硬盘等存储设备,可以直接看到并访问里面的内容。而在Linux系统中,需要进行挂载,将外来设备加入到系统管理中,才可以正常访问。上面的挂载就需要用到mount命令查看/etc/fstab配置文件,......
  • PS滤镜插件套装 Nik Collection 6 中文版下载
    NikCollection是由Google开发的一套Photoshop插件,包含了7个不同的插件,它们分别是:AnalogEfexPro:模拟胶片摄影风格,包含了多种特效和滤镜。ColorEfexPro:提供了超过50种颜色调整和增强工具,可以让你轻松地进行颜色校正、对比度调整等操作。SilverEfexPro:专门用于黑白照片处理......
  • 博客园上传markdown文件
    博客园上传markdown文件......
  • 根据上传的excel文件url,进行文件查询
    HttpResponseresponse=HttpUtil.createGet(fileUrl).setConnectionTimeout(20000).setReadTimeout(120000).timeout(3600000).execute();InputStreaminputStream=response.bodyStream();booleanxls=ExcelFileUtil.isXls(inputStream......
  • linux文件系统和设备驱动+file结构体
    1,文件系统和设备驱动之间的关系 1)应用程序和VFS之间是系统调用;2)VFS与文件系统以及设备文件之间的接口是file_operations结构体成员函数,这个结构体可以对文件进行打开,读写,定位,控制等操作;如下图所示: 3)由于字符设备的上层没有类似磁盘的ext2等文件系统,所以字符设备的file_opte......
  • py程序:写一个保存文本到文件的函数
    py程序:写一个保存文本到文件的函数━━━━━━━━━━━━━━━━━━━━━━以下是一个Python函数,用来将给定的文本字符串保存到指定的文件中:defsave_text_to_file(text,filename):withopen(filename,'w')asf:f.write(text)该函数使用Python的内置o......
  • 前端封装excel下载方法&&解决前端下载请求设置responseType: 'blob'时后台报错无法处
    请求设置responseType:'blob'时接口报错了如果不做处理则获取不到接口错误信息,此时下载的文件是有问题的。/*@paramsoptions{}*data:Blob,*fileName:String,*successMsg:String,**/import{Message}from'element-ui'importdownloadExcelFilePublicHandler......
  • Linux从文件中逐行读取文件名并将匹配的文件复制到指定目录
    问题应该算挺常见的但是一句话还挺难说清楚,所以百度特别难搜。场景就是,有一堆以员工名称命名的文件(名称可能还有字母数字等前后缀),现在给定一个员工清单,需要从这些文件中筛选出员工清单上列出的员工的文件,并复制到另外一个目录中。输入:1.许多文件名包含员工名称的文件2.一个清......
  • 本科生导师制问题之文件存取累加
    在小学期的过程中,我选择了一个本科生导师制的问题,主要数据结构是广义表,在编写功能的时候有一个统计某导师所有的学生数量,其中包括研究生、本科生两种,为此我编写了一个函数,具体如下--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdownv......