文件下载 乱码 文件损坏 打开undefind等几个坑点

前端请求二进制文件流,返回的是乱码,如下图:

这个时候先别急着找后端,只要能下载生成想要的文件,文件打开内容是正确的都好说.下面总结几种生成导出的写法:

一. a标签点击下载

let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "导出文件.xls";
        link.click();
        window.URL.revokeObjectURL(link.href);

二.浏览器url下载

   let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
   let url = window.URL.createObjectURL(blob);
   window.location.href = url;

三.插件下载

第一步:安装模块包
npm install file-saver

第二步:文件里引用
import * as FileSaver from 'file-saver';

第三步:请求返回函数
    let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
           FileSaver.saveAs(blob, "案件列表.xls");

这个时候点击导出或者下载,文件就下下来了,重点在于打开可能会出现文件损坏,文件打开undefind.

两个点:

1. 前后端分别检查,返回的形式是否为blob形式.
   

解决办法

前端用原生axios写,否则responseType会设置无效.

	axios的Authorization需要配置的别忘记:
	axios.defaults.headers.common["Authorization"] =token;
	
		axios({
	            method: 'POST',
	            url: `${link}/case/message/excel/export`,
	            data: selectedRowKeys,
	            responseType: 'blob'
	        }).then(res => {
	       		 //可以在此处加格式判断,以下代码以excel文件下载为例.
	            let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
	            // console.log(blob)
	            FileSaver.saveAs(blob, "案件列表.xls");
	            message.success("下载成功！", 2);
	        }).catch(err => {
	            console.log(err)
	        })


注意:
application/vnd.ms-excel  是对应xls
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 是xlsx
xlsx可能会有excel版本兼容问题,word同理.


不知道下下来是个什么格式,可以自己在加个判断

      const content = res.data
      let temp = res.headers["content-disposition"]
      let isExcel = temp.indexOf(".xlsx") > 0 || temp.indexOf(".xls") > 0
      let isWord = temp.indexOf(".docx") > 0 || temp.indexOf(".doc") > 0
      let file = {}
      if(isExcel){
        file.type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        file.name = temp.indexOf(".xlsx") > 0 ? 'xlsx' : 'xls'
      }else if(isWord){
        file.name = temp.indexOf(".docx") > 0 ? 'docx' : 'doc'
        file.type = 'application/msword;charset=UTF-8'
      }
      // const blob = new Blob([content], {type: res.data.type})
      const blob = new Blob([content], {type: file.type})
      const fileName = `${row.title}.${file.name}`
      
      

	顺便看下前端在axios的属性设置里有没有设置   withCredentials:true,
	
	这个要跟后端对应,因为后端没有开启就会出现请求问题.
	
	Access-Control-Allow-Credentials:true, 开启了没有,后端检查下.
	
	后端可能会出现拦截,从而不按请求返回blob对象.一般是框架的问题了.
	

2. 前端的index.js的入口文件,有没有引入mock生成的数据文件,文件里引用了mockjs,mock会对返回的数据做处理,导致文件损坏.

解决办法

```
找到数据文件
// import '../mock/mock.js';
```

都确认没问题后,下载打开文件基本没啥问题了,至少目前还没遇上其他坑,心累…