如何使用Vue和Element-UI进行表格数据的导出和导入-猿码集

1. 介绍

在现代 Web 应用程序中，表格数据的导入导出是一个非常常见的需求。这篇文章将带你了解如何使用 Vue 和 Element-UI 实现表格数据的导入和导出功能。

2. 导出表格数据

导出表格数据是将表格数据转换成本地文件并保存到客户端文件系统的过程。我们将使用 file-saver 库在客户端完成文件下载的功能。首先需要安装并导入该库：


npm install file-saver --save-dev
import { saveAs } from 'file-saver'

2.1 将数据转换为 CSV 格式

在导出过程中，我们需要将表格数据转换成 CSV 格式。CSV 是一种基于文本的电子表格，用逗号分隔不同的值，每一行代表一个记录，每个逗号代表一个字段。

我们将使用第三方库 csv-stringify 将表格数据转换成 CSV 格式。你可以使用以下命令进行安装：


npm install csv-stringify --save-dev
import stringify from 'csv-stringify'

以下示例代码将数据生成 CSV 格式：


const data = [
  ['name', 'age', 'sex'],
  ['张三', 18, '男'],
  ['李四', 22, '女'],
  ['王五', 30, '男']
]
stringify(data, (err, output) => {
  console.log(output)
})

以上示例代码将输出以下 CSV 格式的数据：

"name","age","sex" "张三","18","男" "李四","22","女" "王五",'30',"男"

2.2 下载 CSV 文件

将 CSV 数据转换完成后，我们需要通过 file-saver 库将其转换成文件并下载。以下示例代码使用 BLOB 生成一个 CSV 文件：


const data = [
  ['name', 'age', 'sex'],
  ['张三', 18, '男'],
  ['李四', 22, '女'],
  ['王五', 30, '男']
]
stringify(data, (err, output) => {
  const blob = new Blob([output], { type: 'text/csv;charset=utf-8' })
  saveAs(blob, 'table.csv')
})

以上示例代码将生成名为 table.csv 的文件，其中包含表格数据。

3. 导入表格数据

导入表格数据是将本地文件上传到服务器并将其转换成表格数据的过程。我们将使用 xlsx 库解析 Excel 文件，并使用 axios 库将文件上传到服务器。

3.1 解析 Excel 文件

我们将使用 xlsx 库将 Excel 文件解析为 JavaScript 对象。你可以使用以下命令进行安装：


npm install xlsx --save-dev
import XLSX from 'xlsx'

以下示例代码演示如何将工作表解析成 JavaScript 对象：


const workbook = XLSX.readFile('filename.xlsx')
const worksheet = workbook.Sheets['Sheet1']
const data = XLSX.utils.sheet_to_json(worksheet)
console.log(data)

以上示例代码将解析 filename.xlsx 文件的 Sheet1 工作表，并将其转换成 JavaScript 对象。输出结果为：


[
  { "name": "张三", "age": 18, "sex": "男" },
  { "name": "李四", "age": 22, "sex": "女" },
  { "name": "王五", "age": 30, "sex": "男" }
]

3.2 上传文件

将文件上传到服务器是使用 axios 库完成的。你可以使用以下命令进行安装：


npm install axios --save-dev
import axios from 'axios'

以下示例代码演示如何将文件上传到服务器：


const formData = new FormData()
formData.append('file', file)
axios.post('/upload-file', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then((response) => {
  console.log(response.data)
})

以上示例代码使用 FormData 将文件包装成表单数据，并通过 axios 发送到服务器。服务器代码逻辑需要根据具体需求实现。

4. Vue 和 Element-UI 实现表格数据的导入导出

现在我们已经了解了如何将表格数据导入导出以及如何将数据转换成 CSV 格式和解析 Excel 文件。下一步，我们将使用 Vue 和 Element-UI 实现表格数据的导入导出功能。

4.1 安装 Element-UI

首先，我们需要安装并导入 Element-UI：


npm i element-ui -S
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

4.2 实现导出功能

在实现导出功能之前，我们需要将表格数据存储在 Vuex 中。以下示例代码演示如何将表格数据存储在 Vuex 中：


const store = new Vuex.Store({
  state: {
    tableData: [
      { name: '张三', age: 18, sex: '男' },
      { name: '李四', age: 22, sex: '女' },
      { name: '王五', age: 30, sex: '男' }
    ]
  }
})

以下示例代码演示了如何将表格数据导出成 CSV 文件：


import { saveAs } from 'file-saver'
import stringify from 'csv-stringify'
export function exportCsv () {
  const data = [
    ['name', 'age', 'sex'],
    ...store.state.tableData.map(item => [item.name, item.age, item.sex])
  ]
  stringify(data, (err, output) => {
    const blob = new Blob([output], { type: 'text/csv;charset=utf-8' })
    saveAs(blob, 'table.csv')
  })
}

以上示例代码将导出名为 table.csv 的文件，并包含表格数据。

4.3 实现导入功能

在实现导入功能之前，我们需要修改 HTML 文件，添加一个上传文件的按钮和 input 元素：


<template>
  <div>
    <el-button type="primary" @click="handleUpload">上传文件</el-button>
    <input type="file" ref="fileInput" style="display: none;" @change="handleChange">
  </div>
</template>

以下示例代码演示如何将 Excel 文件上传并解析成表格数据：


import axios from 'axios'
import XLSX from 'xlsx'
export default {
  methods: {
    handleUpload () {
      this.$refs.fileInput.click()
    },
    async handleChange (event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      const response = await axios.post('/upload-file', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      const workbook = XLSX.read(response.data, { type: 'array' })
      const worksheet = workbook.Sheets[workbook.SheetNames[0]]
      const data = XLSX.utils.sheet_to_json(worksheet)
      console.log(data)
    }
  }
}

以上示例代码将解析 Excel 文件，并将其转换成表格数据。

5. 总结

在本文中，我们学习了如何使用 Vue 和 Element-UI 实现表格数据的导入导出功能。我们了解了如何将表格数据转换成 CSV 格式、解析 Excel 文件，以及使用 file-saver 和 axios 库上传和下载文件。在 Vue 中，使用 Vuex 存储表格数据，并在组件中访问数据进行导入导出。

通过这篇文章的学习，你应该已经掌握了如何实现表格数据的导入导出，可以在实际项目中应用这些技术。

如何使用Vue和Element-UI进行表格数据的导出和导入