Vue3导入Excel表格并展示（使用xlsx插件 Vite Element Plus）

引言

在前端开发中，我们经常会遇到需要导入Excel表格数据并展示的需求。本文将介绍如何使用Vue3及相关插件完成这一功能，同时结合Vite和Element Plus进行快速搭建与处理。

准备工作

在开始之前，确保已经正确安装了如下工具和依赖：

Node.js
Vue CLI 3.0或以上版本
Vite
Element Plus
xlsx插件

安装相关依赖

首先，我们需要创建一个新的Vue3项目，并安装Vite，Element Plus和xlsx插件。

npm init @vitejs/app excel-vue3 --template vue
cd excel-vue3

然后，安装Element Plus和xlsx插件：

npm install element-plus xlsx

导入Excel表格

在Vue组件中创建一个文件上传按钮，并为其绑定一个方法：

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

<script>
export default {
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0];
      ...
    }
  }
}
</script>

将Excel表格文件转换成可读取的数据对象：

const reader = new FileReader();
reader.onload = function(e) {
  const data = new Uint8Array(e.target.result);
  const workbook = XLSX.read(data, { type: 'array' });
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  ...
};
reader.readAsArrayBuffer(file);

将读取到的数据存储到Vue组件的数据中：

this.data = jsonData;

展示Excel表格

在Vue组件中使用Element Plus的Table组件展示数据：

<template>
  <div>
    ...
    <el-table :data="data" border>
      <el-table-column v-for="(item, index) in columns" :key="index" :prop="'col' + index" :label="'Column ' + index">
      </el-table-column>
    </el-table>
  </div>
</template>

在Vue组件中定义columns和data数据，并将读取到的JSON数据进行调整后存储到data中：

data() {
  return {
    columns: [],
    data: []
  };
},
methods: {
  handleFileUpload(e) {
    ...
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    const columns = jsonData[0].map((_, index) => ({ label: 'Column ' + index, prop: 'col' + index }));
    const data = jsonData.slice(1).map(row => {
      const obj = {};
      row.forEach((cell, index) => { obj['col' + index] = cell; });
      return obj;
    });

    this.columns = columns;
    this.data = data;
  }
}

额外美化标题

为了使标题更加美观，我们可以加入一些样式来改变它的外观。

<template>
  <div>
    ...
    <h1 class="page-title">Vue3导入Excel表格并展示</h1>
    <input type="file" @change="handleFileUpload" />
    ...
  </div>
</template>

<style>
.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>

结语

至此，我们已经成功实现了Vue3导入Excel表格并展示的功能。通过使用xlsx插件、Vite和Element Plus，我们可以快速搭建出一个支持Excel导入的Vue3应用，为数据展示和处理提供了方便与便捷。

希望本文能对大家在实现类似需求时有所帮助，如果有任何问题或疑惑，欢迎留言讨论。

本文来自极简博客，作者：蓝色妖姬，转载请注明原文链接：Vue3导入Excel表格并展示（使用xlsx插件 Vite Element Plus）