vue3 前端导出excel

Vue3 中前端导出 Excel 的通常做法是利用一些第三方库，如 `xlsx` 或者 `vue-excel-export`，它们可以方便地将数据转换为 Excel 格式并生成下载链接。以下是基本步骤：

1. **安装依赖**：
首先需要安装对应的库，例如通过 npm 安装：

   npm install axios xlsx // 或者 vue-xlsx-export 如果你选择后者

2. **引入和配置**：
引入所需的模块并在 Vue 实例中注册使用：

   import XLSX from 'xlsx';
   import { exportExcel } from 'vue-excel-export'; // 如果使用 vue-excel-export

   Vue.prototype.$exportExcel = function (data, filename) {
     // ...
   };

3. **导出函数实现**：
使用库提供的 API 将数据转为 Excel 表格，然后创建 download URL：

   Vue.prototype.$exportExcel = function (data, filename) {
     let workbook = XLSX.utils.book_new();
     let ws = XLSX.utils.aoa_to_sheet(data);

     XLSX.utils.book_append_sheet(workbook, ws, filename || "sheet1");
     let buffer = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' });

     let blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
     let url = window.URL.createObjectURL(blob);
      /* 或者使用 vue-excel-export */
      // exportExcel({ data, filename, blob }, true); // 第二个参数表示是否显示预览

      setTimeout(() => {
        // 这里可以设置点击按钮后的操作，比如自动下载或弹窗提示下载
        window.location.href = url;
        window.URL.revokeObjectURL(url);
      }, 0);
   };

4. **在组件中使用**：
在你需要导出 Excel 的地方调用这个方法，传入你要导出的数据和文件名：

   <button @click="$emit('downloadExcel', yourData, 'example.xlsx')">导出 Excel</button>

并在父组件接收这个事件，触发导出：

   <template>
     <child-component @downloadExcel="handleDownloadExcel"></child-component>
   </template>

   <script>
     methods: {
       handleDownloadExcel(data, filename) {
         this.$exportExcel(data, filename);
       }
     }
   </script>