使用blob格式数据实现不打开新网页直接下载文件

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

大家好。今天更文第二天讲一讲工作上遇到的问题吧。是一个导出excel表格的问题,前端导出excel表格有两种办法，一是打开新链接后下载，另一种是不打开链接在当前页面下载文件。

打开新连接下载文件的方法很简单，就是window.open(url)，配置好后端的url后直接点击就可以下载。当然这就是前端的工作了，后端的工作就是地址返回二进制流文件。直接打开地址的方法不可以进行token校验，因为打开地址是明文携带参数，而token是无法进行明文传输的，相当于将用户的隐私泄露于大庭广众之下，是相当危险的。怎么避免这种行为呢，就是网页内请求地址，配置接口地址返回的数据格式为blob格式，常用的为axios中配置 resopnesType:"blob"。但是问题来了，在uni-app中发送请求的api并不支持配置返回数据为blob格式。我尝试将项目中导入axios并接收数据，这个方法可以完成这个在本页面中下载文件，但是不太好，因为作为公司的项目来说，页面当然是尽量使用公共方法，并且尽可能不对公共文件做改动，导入axios依赖毕竟是新加的，而且只为了这一个需求，这样当然不合适，那么我就只能在数据上做功夫了。uni.request()获取到数据之后进行blob格式转换

let blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=utf-8'});

用获取到的数据转换为blob格式再进行后续的操作

if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName)
} else {
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href) //释放内存
}

这样既不影响公共文件也可以完成uni.request()方法请求到的二进制流文件数据在网页内无需跳转刷新就可以下载文件了，