Vue+Element表格如何导出Excel文件？手把手教学！

2023-10-20 16:27:33

前言

在许多应用场景中，我们需要将表格数据导出为 Excel 文件，以便于进一步分析、处理或共享。Vue.js 是一个流行的前端框架，而 Element UI 是一个基于 Vue.js 的 UI 组件库，提供了许多实用的组件，包括表格组件。在本文中，我们将介绍如何使用 Vue.js 和 Element UI 将表格数据导出为 Excel 文件。

2. 准备工作

在开始之前，请确保您已经安装了 Vue.js 和 Element UI。您可以通过以下命令进行安装：

npm install vue
npm install element-ui

3. 创建表格组件

首先，我们需要创建一个 Vue.js 组件来表示表格。可以使用以下代码创建组件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, address: '123 Main Street' },
        { name: 'Mary', age: 25, address: '456 Elm Street' },
        { name: 'Bob', age: 40, address: '789 Oak Street' }
      ]
    }
  }
}
</script>

在上面的代码中，我们创建了一个名为 TableData 的组件，它包含了一个 el-table 组件。el-table 组件是 Element UI 的表格组件，它可以用来展示数据。

4. 添加导出按钮

接下来，我们需要在表格组件中添加一个导出按钮。可以使用以下代码添加按钮：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-button @click="exportExcel" type="primary">导出 Excel</el-button>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, address: '123 Main Street' },
        { name: 'Mary', age: 25, address: '456 Elm Street' },
        { name: 'Bob', age: 40, address: '789 Oak Street' }
      ]
    }
  },
  methods: {
    exportExcel() {
      const tableData = this.tableData;
      const header = ['姓名', '年龄', '地址'];
      const fileName = '导出表格';

      // 使用第三方库导出 Excel 文件
      alasql('SELECT * INTO XLSX("' + fileName + '.xlsx",?) FROM ?', [header, tableData]);
    }
  }
}
</script>