vue.js 前端需要从后端服务器上下载excel 表格文件。

Question

后端提供的是一个get请求的RESTful 。目前用 a标签打开这个后端的url，但是请求这个url需要在头部添加token 信息该如何处理。没加token验证前点击a标签直接就下载下来了，现在点击提示token不存在，配置token的header信息是在axios 的请求头中，其他的api都没问题。

<a :href="downLoadSrc" download class="downLoad-btn">
//下载文件的url
self.downLoadSrc='http://172.21.81.160:8085/storemonitor/api/v1.0/inspect/template';

Answer 1

使用a标签,在请求的正确返回里构造一个a标签

let downLoadSrc="http://http://172.21.81.160:8085/storemonitor/api/v1.0/inspect/template";
this.$axios.get(downLoadSrc)
      .then(res => {
          var btn = document.createElement("a"); 
          btn.setAttribute('download', '');// download属性
          btn.setAttribute('href', downLoadSrc);// href链接
          btn.click();// 自执行点击事件
})

download其实可加可不加，表示文件的名称。不加就是文件的默认文件名
当点击a标签的时候，文件的下载过程，转码等等操作是由浏览器来自主完成的，浏览器能自动检测文件扩展名来生成对应的文件格式。

Answer 2

可以直接用ajax下载下来文件，然后可以用两种方法处理：
1、用FileReader类readAsDataURL读取。
2、 window.URL.createObjectURL(blob)。
把处理后的结果直接放入标签a的href中即可。