vue使用axios导出后台返回的文件流为excel表格详解

下面是详细讲解“vue使用axios导出后台返回的文件流为excel表格”的攻略。

1. 准备工作

首先，我们需要准备一些工作。这些工作包括：

安装vue和axios库
安装js-xlsx库（用于处理excel文件）
后台返回的文件流是excel格式
后台需要返回file流类型，不能直接返回json

2. 导出excel表格

前端代码示例：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
import axios from 'axios'
import XLSX from 'xlsx'

export default {
  name: 'ExportExcel',
  methods: {
    exportExcel() {
      axios({
        url: '/api/exportExcel',
        method: 'GET',
        responseType: 'arraybuffer'  // 接收二进制文件流
      }).then(res => {
        const content = res.data
        const blob = new Blob([content], { type: 'application/octet-stream' })
        const fileName = 'export.xlsx'

        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(blob, fileName)
        } else {
          const fileUrl = window.URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = fileUrl
          a.target = '_blank'
          a.download = fileName
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    }
  }
}
</script>

其中，我们通过axios的get方法获取后台返回的文件流（responseType为arraybuffer类型），然后利用Blob来创建一个二进制文件流实例，在通过a标签来进行下载。如果当前用户浏览器支持msSaveBlob，则直接调用window.navigator.msSaveBlob方法。否则，就通过URL.createObjectURL方法创建一个文件地址、设置和删除一个a标签，完成下载。

后台代码示例（node.js）：

router.get('/exportExcel', async (ctx) => {
  const data = await UserService.getAllUsers()  // 获取所有用户数据
  const workSheet = XLSX.utils.json_to_sheet(data)  // 将json数据转换为worksheet（excel表格的一张）
  const workBook = XLSX.utils.book_new()  // 新建workbook
  XLSX.utils.book_append_sheet(workBook, workSheet, 'Sheet1')  // 向workbook中添加worksheet
  const file = XLSX.write(workBook, { type: 'buffer' })  // 将workbook写入文件buffer

  ctx.response.type = 'application/octet-stream'  // 设置响应类型为二进制流
  ctx.response.body = file  // 返回二进制文件流
})

在这里，我们使用了node.js的路由，并通过UserService.getAllUsers()获取所有用户数据，然后将JSON数据转换为Excel worksheet，最后使用js-xlsx库的write方法将worksheet写入文件buffer，最终返回给前端的是一个文件流（blob）。