vue实现带token校验下载文件

在做一个前台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;
      });