vue 导出文件,携带请求头token操作

让我详细讲解一下 "vue 导出文件,携带请求头token操作" 的完整攻略。

导出文件

要导出文件，我们可以利用浏览器提供的 download 和 Blob API 来实现。具体的步骤如下：

1. 创建一个 Blob 对象，存储文件的内容。我们可以使用 new Blob() 方法来创建一个 Blob 实例。通常我们需要将要导出的内容以字符串形式传递给 Blob 的构造函数。

let content = 'Hello, World!'
let blob = new Blob([content], {
  type: 'text/plain;charset=utf-8'
})

这里的 type 属性表示 Blob 的 MIME 类型，这里是纯文本文件的类型。

1. 利用 URL.createObjectURL() 方法生成一个下载链接。

let url = window.URL.createObjectURL(blob)

1. 创建一个 <a> 标签并设置 download 属性和 href 属性来下载文件。

let link = document.createElement('a')
link.style.display = 'none'
link.download = 'file.txt'
link.href = url
document.body.appendChild(link)
link.click()

注意，我们使用了 display:none 来隐藏这个链接，这样用户就不会看到它了。

既然我们要导出文件，那么很容易想到就是在点击某个按钮或者链接时进行导出，如下面的示例代码：

<template>
  <button @click="exportFile">Export</button>
</template>

<script>
export default {
  methods: {
    exportFile() {
      let content = 'Hello, World!'
      let blob = new Blob([content], {
        type: 'text/plain;charset=utf-8'
      })
      let url = window.URL.createObjectURL(blob)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.download = 'file.txt'
      link.href = url
      document.body.appendChild(link)
      link.click()
    }
  }
}
</script>

携带请求头token操作

要在请求头中携带 token，我们需要在发送请求前先在请求头中添加相应的信息。Vue.js 中的 axios 库提供了很好的支持。具体步骤如下：

1. 安装并引入 axios 库。

npm install axios --save

import axios from 'axios'

1. 在需要发送请求的地方创建一个 axios 实例。这里需要注意，我们可以在该实例中设置全局的请求头信息，这样所有请求都会携带这些信息。

let instance = axios.create({
  baseURL: '<your_api_url>',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

这里的 headers 属性就是我们添加请求头信息的地方了。

1. 在请求时，我们需要在请求的配置对象中添加当前用户的 token，通常是从 store 中获取。

let token = store.state.user.token
let config = {
  headers: {
    Authorization: `Bearer ${token}`
  }
}

这里的 Bearer 是一种 token 格式，大部分情况下都是这样的。

1. 发送请求。

instance.get('/api/data', config)
  .then(response => console.log(response))
  .catch(error => console.error(error))

下面是一个完整的例子，该例子通过点击按钮导出一个 csv 文件，并在导出时添加了 token 到请求头中。

<template>
  <button @click="exportData">Export</button>
</template>

<script>
import axios from 'axios'
import store from '@/store'

export default {
  methods: {
    exportData() {
      let token = store.state.user.token
      let config = {
        headers: {
          Authorization: `Bearer ${token}`
        },
        responseType: 'blob'
      }

      axios.get('/api/export', config)
        .then(response => {
          let url = window.URL.createObjectURL(new Blob([response.data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.download = 'data.csv'
          link.href = url
          document.body.appendChild(link)
          link.click()
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

在该例子中，我们首先从 store 中获取 token 并创建一个请求配置对象。我们设置了响应类型为 blob，因为我们要导出的是一个文件。然后我们使用 axios 发送 GET 请求，并在响应成功后获取响应内容的 Blob 对象，并生成下载链接在浏览器中下载。