vue3前端下载excel功能实现

在Vue3前端实现Excel下载功能，一般会利用一些第三方库，比如`xlsx`（用于生成Excel文件）和`file-saver`（用于保存文件到本地）。以下是基本步骤：

1. **安装依赖**：
- 安装 `xlsx` 和 `file-saver` 或者 `js-xlsx`（`xlsx`的一个轻量级版本）：

     npm install xlsx file-saver // 或者 npm install js-xlsx file-saver

2. **生成Excel文件**：
使用`xlsx`库生成一个工作表（Sheet）或者整个电子表格（Workbook）。

   import XLSX from 'xlsx';

   const data = ...; // 你需要的数据
   const ws = XLSX.utils.json_to_sheet(data);
   const wb = { SheetNames: ['Sheet1'], Sheets: { 'Sheet1': ws } };
   const buffer = XLSX.write(wb, { type: 'binary' });

3. **保存到本地**：
使用`file-saver`库创建一个Blob对象，然后转化为下载链接。

   import FileSaver from 'file-saver';

   const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 指定正确的MIME类型
   FileSaver.saveAs(blob, 'example.xlsx'); // 设置下载名称

4. **封装成API或按钮组件**：
将上述逻辑封装成一个函数或组件，在需要下载的地方调用。

export function downloadExcel(filename, data) {
  // ...
}

// 或者在一个按钮上绑定点击事件
<template>
  <button @click="downloadExcel('example.xlsx', yourData)">下载</button>
</template>

<script>
export default {
  methods: {
    downloadExcel(filename, data) {
      this.downloadFile(data, filename);
    },
    downloadFile(data, fileName) {
      //...
    }
  }
}
</script>