vue3 导出接口返回的数据为excel文件

在 Vue 3 中导出接口返回的数据为 Excel 文件可以通过多种方式实现。下面是其中一种常用的实现步骤：

安装依赖库：通常，你可能需要依赖如 xlsx 或者 file-saver 之类的第三方库。
```
npm install xlsx file-saver
```

引入依赖：在你的 Vue 组件或页面中引入这些库。

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

发送 API 请求并接收数据：使用 axios 或其他 HTTP 库请求数据。

async fetchData() {
  const response = await axios.get('your-api-endpoint');
  this.data = response.data;
}

处理并导出数据：利用获取到的数据，然后用 xlsx 将其转换为工作簿（Workbook）格式，最后使用 file-saver 保存为 .xlsx 文件。

exportData() {
  // 将数据转为工作簿格式
  const ws = XLSX.utils.json_to_sheet(this.data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  
  // 生成 XLSX 文件
  const xlsxData = XLSX.write(wb, { bookType: 'xlsx', type: 'blob' });
  
  // 利用 file-saver 保存文件
  saveAs(xlsxData, 'data.xlsx');
}

触发导出操作：你可以在一个按钮的点击事件中触发这个导出操作。
```
<button @click="exportData">导出为 Excel</button>
```

完整示例：

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

<script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import axios from 'axios';

export default {
  data() {
    return {
      listExport: []
    };
  },
  async mounted() {
    await this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await axios.get('your-api-endpoint');
      this.listExport = response.data
    },
    exportData() {
      // 导出数据
        const ws = XLSX.utils.json_to_sheet(this.listExport);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
        const xlsxData = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
        const blob = new Blob([xlsxData], {type: 'application/octet-stream'});
        saveAs(blob, 'data.xlsx');
    }
  }
};
</script>

这样，当用户点击 "导出为 Excel" 按钮时，接口返回的数据就会被保存为一个 Excel 文件。这只是一个基础的示例，你可以根据需要做更复杂的处理和优化。