vue实现带token校验下载文件
在做一个前台vue,后台是java的项目中,有导出Excel文件的功能。开始做的导出Excel功能不需要带token,这种方式是及其不合理的,数据容易泄露。经过一番折腾实现了Vue带token校验下载文件流的功能。不带token的下载方法:不带token下载文件,实现特别简单直接使用<a> 标签,标签的href属性填写后台接口或服务器上文件地址即可。<a:href="url"&g
·
在做一个前台vue,后台是java的项目中,有导出Excel文件的功能。开始做的导出Excel功能不需要带token,这种方式是及其不合理的,数据容易泄露。经过一番折腾实现了Vue带token校验下载文件流的功能。
-
不带token的下载方法:
不带token下载文件,实现特别简单直接使用<a> 标签,标签的href属性填写后台接口或服务器上文件地址即可。
<a :href="url">导出</a>
-
带token校验的方法:
文件在网络中传输都是以二进制流形式传输的,我们借助一个特殊的对象Blob来实现。
toserver(deptId).then(response => {
var blob = new Blob([response.data], {
type: "application/vnd.ms-excel"
});
var url = window.URL.createObjectURL(blob);
// 设置文件类型,这里以excel为例
// blob.type = "application/excel";
// 创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
var a = document.createElement("a");
a.href = url;
a.download = "导出文件名.xls";
a.click();
this.isDisabled = false;
});
更多推荐
已为社区贡献1条内容
所有评论(0)