前端如何在 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 文件的功能。這個功能可以應用于很多場景，比如數據導入、表格分析等。