JavaScript---文件下载处理文件下载失败兼容IE11文件下载

文件下载分为两种形式

如果后台服务器的静态目录有可供下载的静态资源，则通过【window.location.href=“文件路径”】方式获取即可；
如果后台服务器无可供下载的静态资源，返回的是一个文件流，则通过将文件写入内存，并且创建a元素，a链接href属性指向内存中的文件，download属性指向要下载的文件名，模拟a元素的点击事件，进行下载；

具体使用哪种方式下载文件，取决于后台。下面举例讲第二种方式

文件下载前后端接口如下：

一、下载文件

IE11文件下载：【window.navigator.msSaveBlob(res.data, 文件名);】或【window.navigator.msSaveOrOpenBlob(res.data, 文件名);】

chrome等其他浏览器：通过将文件写入内存，并且创建a元素，a链接href属性指向内存中的文件，download属性指向要下载的文件名，模拟a元素的点击事件，进行下载；

二、处理下载失败

由于设置了【 responseType: "blob"】，会把后台返回的data强制转换为blob，那么，在创建下载文件链接前，先通过如下方式将已转为blob类型的data转回json格式，判断是否下载成功。

图中this.result为FileReader获取blob数据转换为json后的数据，即后台返回的原始数据。如果解析对象成功，进入【try{...}】处理后台返回下载失败的情况。如果解析成对象失败，说明是正常的文件流，进入【catch(err){...}】创建下载文件链接。

三、解决中文乱码，兼容IE11文件下载

【encodeURI(url)】可解决url中含有中文，在ie11浏览器下载失败问题。当在接口url处不加【encodeURI】时，chrome和IE11浏览器下载文件请求时控制台显示如下：

当在接口url处加上【encodeURI】时，IE11下载文件成功

完整代码如下：

【http.js】

// 导入axios
import axios from "axios";// 设置基地址-使用自定义配置新建一个 axios 实例const http = axios.create({baseURL: "/",
});export const fileDownload = param => {return http.get(encodeURI(`system/file/download?filename=${param.fileName}`),{responseType: "blob"})

【点击下载文件按钮执行downloadHelp()方法】

   downloadHelp() {// 判断是否有下载权限if (this.permList.indexOf("/system/file/download") == -1) {this.$message.warning("抱歉，您没有操作权限！");} else {let param = {fileName: "产品使用手册V1.0 .docx",};fileDownload(param).then((res) => {let data = res.data;//处理下载失败情况，由于：responseType: 'blob'会把data强制转为blob，// 解决：将已转为blob类型的data转回json格式，判断是否下载成功let filereader = new FileReader();filereader.onload = function () {try {let jsonData = JSON.parse(this.result); // this.result为FileReader获取blob数据转换为json后的数据，即后台返回的原始数据alert(jsonData.respDesc);// if (!!jsonData["respCode"]) {//   this.$message.error(jsonData.respDesc);// }} catch (err) {//解析成对象失败，说明是正常的文件流if (window.navigator.msSaveOrOpenBlob) {// 兼容ie11try {// window.navigator.msSaveBlob(res.data, param.fileName); //response为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([response.data]) 注意这里需要是数组形式的,fileNm就是下载之后的文件名window.navigator.msSaveOrOpenBlob(res.data, param.fileName);} catch (e) {console.log(e);}} else {//chrome浏览器let streamData = res.data;// 创建blob对象，传入后端返回的文件流let blob = new Blob([streamData], {type: "application/octet-stream;charset=utf-8",});let downloadUrl = window.URL.createObjectURL(blob); //创建下载的链接let alink = document.createElement("a");alink.href = downloadUrl;alink.download = param.fileName; //下载的文件名alink.click(); //点击下载window.URL.revokeObjectURL(downloadUrl); //释放blob对象}}};filereader.readAsText(data); // FileReader的API}).catch((error) => {console.log(error);});}},