Vue下载文件如Excel的一种方式

一 说明

前端调用下载接口时，一般都要求用户登录了，登录的token，如果是从cookie中获取的，那直接一个<a>标签跳转到新页签打开即可下载，但是如果是通过header传入的，此时就需要做一些处理。

二 具体代码

downloadAction(url, parameter) {
  // 鉴权token
  let tokenHeader = {"X-Token": "xxxxxxx"};
  return axios({
    url: url,
    method:'get' ,
    params: parameter,
    responseType: 'blob',
    headers: tokenHeader
  })
},
handleExportXls(){
  let fileName = "导出excel.xlsx"
  this.queryParam.treatmentId = this.$route.params.id
  let param = this.queryParam;
  console.log("导出参数",param)
  downloadAction(this.url.exportDayChecks, param).then((res)=>{
    if (!res) {
      this.$message.warning("文件下载失败")
      return
    }
    let blob = res;
    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);
    fileReader.onload = event => {
      /**  新建个下载的a标签，完成后移除。 */
      let a = document.createElement("a");
      a.download = fileName;
      a.href = event.target.result;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };
  })
}