前端用Vue实现Excel与table表格的导入/导出

在 Vue 项目中，可以使用第三方库 xlsx 来实现 Excel 文件的导入和处理。以下是一个简单的实现步骤：

导入

1. 安装 xlsx 库 可以通过 npm 安装：

npm install xlsx --save

2. 在 Vue 组件中引入并使用 xlsx 库

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        // 处理 jsonData 数组数据
      }
      reader.readAsArrayBuffer(file)
    }
  }
}
</script>

导出

    exportToExcel() {
      /* 用于保存导出的数据的数组 */
      var data = []

      /* 添加表头 */
      var header = ["Name", "Age", "City"]
      data.push(header)

      /* 添加数据 */
      var row1 = ["Alice", 25, "New York"]
      var row2 = ["Bob", 30, "San Francisco"]
      var row3 = ["Charlie", 35, "Chicago"]
      data.push(row1)
      data.push(row2)
      data.push(row3)

      /* 创建 Excel 文件 */
      var wb = XLSX.utils.book_new()

      /* 创建一个名为 Sheet1 的工作表 */
      var ws = XLSX.utils.aoa_to_sheet(data)
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1")

      /* 导出 Excel 文件 */
      XLSX.writeFile(wb, "data.xlsx")
    }