vue 导出文件，携带请求头token

前言

本文并不能直接复制到本地看效果，仅提供代码参考

1.使用axios的方式携带请求头token

2.设置响应的数据类型

responseType: 'blob'

3.请求成功，返回二进制文件的数据回来

4.请求失败，返回json

5.示例代码

如果有需要设置其他的blob类型，可以查看这篇文章：blob转换的文件类型

<template>
    <el-button type="primary" size="small" @click="exportFile">导出</el-button>
</template>

<script>
import axios from "axios";

export default {
  methods: {
    exportFile() {
      axios({
        method: 'get',
        url: '/api',
        headers: {
          token: '79faf82271944fe38c4f1d99be71bc9c'
        },
        responseType: 'blob'
      })
        .then(res => {
          if (res.data.type) {
            // 文件下载
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel'
            });
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', '导出文件.xlsx');
            link.click();
            link = null;
            this.$message.success('导出成功');
          } else {
            // 返回json
            this.$message.warning(res.data.msg);
          }
        })
        .catch(() => {});
    }
  }
};
</script>

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。