vue 导出文件携带请求头token

最新推荐文章于 2023-03-28 10:44:46 发布

yjxfox

最新推荐文章于 2023-03-28 10:44:46 发布

阅读量902

点赞数 2

分类专栏： Vue.js 文章标签： vuejs vue导出文件带请求头 vue 导出文件带token

原文链接：https://blog.csdn.net/weixin_43233914/article/details/106541965?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

版权

Vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言

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

1.使用axios的方式携带请求头token
在这里插入图片描述
2.设置响应的数据类型

responseType: "blob"

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

在这里插入图片描述
4.请求失败，返回json

5.示例代码

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

<script>
import axios from "axios";

export default {
  data() {
    return {
      btnLoading: false
    };
  },
  methods: {
    // responseType 响应类型
    exportFile() {
      this.btnLoading = true;
      axios({
        method: 'get',
        url: '/api',
        headers: {
          token: '79faf82271944fe38c4f1d99be71bc9c'
        },
        responseType: "blob"
      })
        .then(res => {
          this.btnLoading = false;
          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(err => {
          this.btnLoading = false;
          this.$message.error("下载失败");
        });
    }
  }
};
</script>