从头到尾：在Vue3中导入并显示Excel表格（使用XLSX插件+Vite+Element Plus）

2023-08-05 05:18:26

驾驭Excel表格的复杂世界：在Vue3中导入和展示数据

置身于数据的世界，复杂性常常令人望而生畏，尤其是在面对海量数字和事实时。但是，使用Vue3，我们可以轻松将复杂的数据世界变成清晰有序的结构。本文将深入探讨如何在Vue3项目中导入和展示Excel表格，让你轻松驾驭数据海洋。

准备你的工具箱

踏上这段数据探索之旅，你需要配备好你的工具箱。首先，你需要安装Node.js和Vite。Vite是一个轻量级的构建工具，将帮助你快速构建Vue3项目。接下来，你需要安装Element Plus，这是一个UI框架，提供了一系列预建组件，让你的应用程序界面更具吸引力。最后，但绝不是最不重要的，你需要安装XLSX插件，它将成为我们处理Excel表格的主力军。

安装依赖项

在准备好工具后，是时候安装依赖项了。在你的终端中输入以下命令：

npm install vite xlsx element-plus

这些依赖项将成为构建Vue3项目时不可或缺的伙伴。

初始化你的项目

使用以下命令创建你的Vue3项目：

vite create <project-name>

引入XLSX插件

在"main.js"文件中，导入XLSX插件：

import Vue from 'vue'
import XLSX from 'xlsx'
Vue.use(XLSX)

构建用户界面

在"App.vue"文件中，创建一个友好的用户界面，让用户可以轻松选择并导入Excel表格。你可以使用以下代码：

<template>
  <div>
    <input type="file" @change="handleExcel">
  </div>
</template>

处理Excel表格

在"methods"中，定义一个函数来处理Excel表格：

handleExcel(e) {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.onload = (e) => {
    const data = e.target.result
    const workbook = XLSX.read(data, {type: 'binary'})
    const sheetNames = workbook.SheetNames
    const worksheet = workbook.Sheets[sheetNames[0]]
    const json = XLSX.utils.sheet_to_json(worksheet)
    this.tableData = json
  }
  reader.readAsBinaryString(file)
}

展示表格数据

在"template"中，使用"v-for"循环将Excel表格数据展示出来：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>