Vue 2.0 + Element UI 中导出 el-table 数据到 Excel 的简洁方案

2023-11-07 00:04:48

对于从事前端开发的我们来说，经常会遇到需要将表格数据导出为 Excel 文件的情况，以便方便数据分析或共享给同事。Element UI 作为 Vue.js 最受欢迎的 UI 框架之一，提供了强大的数据表格组件 el-table，可以轻松实现数据的导出。

在这篇文章中，我们将逐步介绍如何在 Vue 2.0 + Element UI 中使用 el-table 导出数据到 Excel。

1. 安装 Element UI

首先，确保你已经安装了 Element UI。如果你还没有安装，可以使用 npm 或 yarn 包管理器安装它：

npm install element-ui

或者

yarn add element-ui

2. 在 Vue 中导入 Element UI

在你的 Vue 项目中，你需要在 main.js 或其他入口文件中导入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

3. 在 Vue 模板中使用 el-table

在你的 Vue 模板中，你可以使用 el-table 组件来显示你的数据。例如，以下代码展示了一个简单的 el-table 组件，用于显示一些静态数据：

<el-table :data="tableData">
  <el-table-column property="name" label="姓名"></el-table-column>
  <el-table-column property="age" label="年龄"></el-table-column>
  <el-table-column property="address" label="地址"></el-table-column>
</el-table>

4. 将 el-table 数据导出为 Excel

为了将 el-table 的数据导出为 Excel，你需要使用 Element UI 提供的导出功能。具体步骤如下：

在你的 Vue 模板中，为 el-table 组件添加一个导出按钮。例如：

<el-table :data="tableData">
  <el-table-column property="name" label="姓名"></el-table-column>
  <el-table-column property="age" label="年龄"></el-table-column>
  <el-table-column property="address" label="地址"></el-table-column>
  <el-button type="primary" @click="exportData">导出</el-button>
</el-table>

在你的 Vue 组件中，添加以下代码来处理导出按钮的点击事件：

exportData() {
  const tableData = this.tableData.map(item => {
    const newItem = Object.assign({}, item)
    newItem.id = parseInt(newItem.id)
    return newItem
  })

  const wb = new Workbook()
  const ws = wb.addWorksheet('Sheet1')

  ws.cell(1, 1).value = 'ID'
  ws.cell(1, 2).value = '姓名'
  ws.cell(1, 3).value = '年龄'
  ws.cell(1, 4).value = '地址'

  for (let i = 2; i <= tableData.length + 1; i++) {
    ws.cell(i, 1).value = tableData[i - 2].id
    ws.cell(i, 2).value = tableData[i - 2].name
    ws.cell(i, 3).value = tableData[i - 2].age
    ws.cell(i, 4).value = tableData[i - 2].address
  }

  wb.write('xlsx', { bookType: 'xlsx', type: 'buffer' }).then((data) => {
    // 将文件保存到本地
    const blob = new Blob([data], { type: 'application/octet-stream' })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = '数据导出.xlsx'
    a.click()
    window.URL.revokeObjectURL(url)
  })
}