前端处理后端返回的二进制流文件
首先收到后台的数据
由于项目文件服务器加密原因,只能通过后台接口获取二进制流,
需求:
需要点击一个 按钮 ,实现文件下载 ,而后端返回的数据为二进制流数据。
原因:
前端收到后台的数据,前端收到后台接口获取的二进制流,前端实现文件下载。前端页面的编码格式和服务端编码格式不同,正如此时,服务端返回的是 blob格式的数据,而我们使用的是 非 blob格式去解析,所以产生了乱码。
1.这一步非常重要!!!在请求接口时要设置responseType为blob。
要想处理这段乱码的数据,首先得先接收,正常情况下axios 不会处理二进制数据,即会去接收但是不会去处理,需要在请求得适合设置 responseType: ‘blob’(我这边是单独的一个js文件,专门存放请求的接口)
2.导出的接口是exportIndicatorValue
,中间的参数是要导出的id,
3.重新写一个方法,是用来出来得到的二进制流文件的
function createExcel(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel",
});
let fileName = name + ".xlsx"; // 文件名+后缀
// 允许用户在客户端上保存文件
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
var link = document.createElement("a");//定义一个a标签
link.href = window.URL.createObjectURL(blob);//需要生成一个 URL 来实现下载,链接到blob上
link.download = fileName;//下载后的文件名称
console.log("fileName", link);
link.click(); //模拟在按钮上实现一次鼠标点击
window.URL.revokeObjectURL(link.href); //释放 URL 对象
}
}