IE11 下载doc pdf等文件的方法

 

文件下载分为两种形式

如果后台服务器的静态目录有可供下载的静态资源，则通过【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) {
// 兼容ie11
try {
// 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);
});
}
},

转自https://blog.csdn.net/maidu_xbd/article/details/107618476
posted @ 2022-07-27 17:38  lonelyshy  阅读(722)  评论(0)  编辑  收藏  举报