前端导入Excel表格

前端如何在 Vue 3 中导入 Excel 文件（.xls 和 .xlsx）？

在日常开发中，我们经常需要处理 Excel 文件，比如导入数据表格、分析数据等。文章将在 Vue 3 中实现导入 .xls 和 .xlsx 格式的文件，并解析其中的数据。

安装依赖

我们需要一个强大的工具来解析 Excel 文件，这里推荐使用 xlsx 库。它功能强大，支持多种格式的 Excel 文件。

在项目中安装 xlsx：

npm install xlsx

---

实现步骤

1. 创建一个文件上传组件

首先，我们需要一个文件上传控件，让用户可以选择 Excel 文件。这个控件可以通过 <input type="file"> 来实现。

2. 解析 Excel 文件

当用户上传文件后，我们需要读取文件内容并解析其中的数据。这里我们会用 FileReader 和 xlsx 库来完成这个任务。

3. 显示解析后的数据

最后，我们将解析后的数据展示在页面上，比如用表格的形式显示。

---

完整代码

下面是一个完整的 Vue 3 组件，包含文件上传、解析和数据展示功能。

模板部分

<template><div><!-- 文件上传控件 --><input type="file" @change="handleFileUpload" accept=".xlsx, .xls" /><!-- 显示解析后的 Excel 数据 --><table v-if="tableData.length"><thead><tr><th v-for="(header, index) in tableData[0]" :key="index">{{ header }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) in tableData.slice(1)" :key="rowIndex"><td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td></tr></tbody></table></div>
</template>

逻辑部分

<script lang="ts">
import { defineComponent, ref } from 'vue';
import * as XLSX from 'xlsx';export default defineComponent({name: 'ExcelUploader',setup() {// 定义一个响应式变量，也就是数组，用于存储解析后的 Excel 数据 const tableData = ref<Array<Array<string | number>>>([]);// 文件上传处理函数const handleFileUpload = (event: Event) => {const target = event.target as HTMLInputElement; // 获取上传的文件const file = target.files?.[0]; // 获取用户上传的第一个文件if (!file) return; // 如果没有文件，直接返回const reader = new FileReader(); // 创建一个 FileReader 对象，用于读取文件内容reader.onload = (e) => {// 将文件内容转换为 ArrayBufferconst data = new Uint8Array((e.target as FileReader).result as ArrayBuffer);const workbook = XLSX.read(data, { type: 'array' }); // 使用 xlsx 解析 Excel 文件// 获取 Excel 文件的第一个工作表名称const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个工作表// 将工作表内容转换为 JSON 数据（二维数组）const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });tableData.value = jsonData; // 将解析后的数据存储到响应式变量中};reader.readAsArrayBuffer(file); // 以 ArrayBuffer 格式读取文件};return {handleFileUpload, // 文件上传处理函数tableData, // 响应式变量，用于存储解析后的数据};},
});
</script>

样式部分

<style scoped>
table {border-collapse: collapse;width: 100%;
}th, td {border: 1px solid #ddd;padding: 8px;
}th {background-color: #f4f4f4;
}
</style>

---

代码解析

1. 文件上传控件

<input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />

• type="file"：让用户可以选择文件。
• @change="handleFileUpload"：监听文件上传事件，当用户选择文件时会触发 handleFileUpload 函数。
• accept=".xlsx, .xls"：限制用户只能上传 .xlsx 或 .xls 格式的文件。

---

2. 文件解析逻辑

const handleFileUpload = (event: Event) => {const target = event.target as HTMLInputElement;const file = target.files?.[0];if (!file) return;const reader = new FileReader();reader.onload = (e) => {const data = new Uint8Array((e.target as FileReader).result as ArrayBuffer);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 });tableData.value = jsonData;};reader.readAsArrayBuffer(file);
};

• FileReader：用于读取用户上传的文件内容。
• readAsArrayBuffer(file)：以 ArrayBuffer 格式读取文件内容。
• XLSX.read(data, { type: 'array' })：使用 xlsx 库解析 Excel 文件。
• XLSX.utils.sheet_to_json(worksheet, { header: 1 })：将工作表内容转换为 JSON 数据。

---

3. 数据展示

<table v-if="tableData.length"><thead><tr><th v-for="(header, index) in tableData[0]" :key="index">{{ header }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) in tableData.slice(1)" :key="rowIndex"><td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td></tr></tbody>
</table>

• v-if="tableData.length"：只有当 tableData 中有数据时才显示表格。
• tableData[0]：第一行数据作为表头。
• tableData.slice(1)：从第二行开始作为表格内容。

---

运行效果

1. 用户点击文件上传按钮，选择一个 .xls 或 .xlsx 文件。
2. 文件上传后，解析其中的数据。
3. 将解析后的数据展示在页面上，表头和内容清晰可见。

---

总结

通过以上步骤，我们成功实现了在 Vue 3 中导入 Excel 文件的功能。这个功能可以应用于很多场景，比如数据导入、表格分析等。