eltable生成exel

在本教程中，我们将学习如何将 Element UI 的表格组件（el-table）导出到 Excel 文件中。Element UI 是一个基于 Vue.js 的 UI 框架，提供了丰富的组件，如 el-table，可以让我们轻松构建可视化数据表格。本教程将向您展示一种用 JavaScript 制作 Excel 表格的方法，并使用 sheetjs 库来将数据喂给它。

**准备工作**

1. 首先，确保已安装并设置好 Element UI：按照 [Element UI 的官方安装指南](https://element.eleme.io/#/en-US/component/installation)来安装和配置。

2. 还需要安装以下库：

- xlsx：这是一个非常实用的 JavaScript 库，用于处理 Excel 文件。执行以下命令进行安装：

```

npm install xlsx

```

**实现过程**

1. 在 Vue 项目的 `src` 目录中，创建一个名为 `utils` 的文件夹。在此文件夹中，创建一个名为 `export.js` 的文件。这个文件将包含我们将用于导出 el-table 数据的函数。

2. 打开 `export.js`，导入依赖关系，并实现导出表格的功能。添加以下代码：

```javascript

import { saveAs } from 'file-saver';

import XLSX from 'xlsx';

export function exportTableToExcel(elTable, filename) {

// 获取表格数据

const tableData = elTable.data;

// 获取表头数据

const columns = elTable.columns.map(column => column.label);

// 将数据转换为 worksheet

const wsData = [columns, ...tableData];

const worksheet = XLSX.utils.aoa_to_sheet(wsData);

// 将 worksheet 转换为 workbook

const workbook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 将 workbook 导出为 Excel 文件

const data = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });

const blob = new Blob([data], { type: 'application/octet-stream' });

saveAs(blob, `${filename || 'data'}.xlsx`);

}

```

以上，我们已经实现了一个名为 `exportTableToExcel` 的导出表格的函数。接下来，让我们看看如何在组件中使用它。

3. 在需要导出表格的组件中，导入实现的 `exportTableToExcel` 函数，并为 el-table 添加一个按钮，用于触发导出操作。例如：

```html

```

在以上示例中，我们首先通过 `ref` 得到 el-table 组件的引用，然后为按钮添加了一个 `click` 事件监听器，调用 `exportToExcel` 方法。在这个方法中，我们使用刚刚创建的 `exportTableToExcel` 函数，传入 el-table 引用和文件名。

完成以上步骤，您现在应该可以正常导出表格数据为 Excel 文件了。在浏览器中打开你的应用，点击导出按钮，应该会看到一个带有 el-table 数据的 Excel 文件被生成并下载到本地。