需求：本地上傳excel 文件，但需要對excel 文件的內容進行解析，然后展示出來

1. 安裝依賴

首先，確保安裝了 xlsx 庫：

bash復制

npm install xlsx

2. 創建 Vue 組件

創建一個 Vue 組件（如 ExcelUpload.vue），用于實現文件上傳和解析功能。

組件代碼：

<template>
? <div>
? ??<input type="file" class="file-btn hoverPointer" accept=".xls,.xlsx"

? ? ? ? ? ? ? ? ? ? ? ? ? ? @change="changeExcel($event)" />
? ? <div v-if="tableData.length > 0">
? ? ? <table>
? ? ? ? <thead>
? ? ? ? ? <tr>
? ? ? ? ? ? <th v-for="header in headers" :key="header">{{ header }}</th>
? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? <tr v-for="(row, index) in tableData" :key="index">
? ? ? ? ? ? <td v-for="cell in row" :key="cell">{{ cell }}</td>
? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? </table>
? ? </div>
? </div>
</template>

<script>
import { ref } from 'vue';
import * as XLSX from 'xlsx';

export default {
? setup() {
? ? const headers = ref([]);
? ? const tableData = ref([]);

? ? const changeExcel= (event) => {

????????const files = e.target.files

? ??????if (files.length <= 0) {

? ? ????????return false

? ??????} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

? ? ????????console.log('上傳格式不正確，請上傳xls或者xlsx格式')

? ? ????????return false

? ??????}

? ? ? const reader = new FileReader();
? ? ? reader.onload = (e) => {
? ? ? ? const data = e.target.result;
? ? ? ? const workbook = XLSX.read(data, { type: 'binary' });
? ? ? ? const sheetName = workbook.SheetNames[0];
? ? ? ? const worksheet = workbook.Sheets[sheetName];
? ? ? ? const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

? ? ? ? headers.value = json[0]; // 表頭
? ? ? ? tableData.value = json.slice(1); // 表格數據
? ? ? };
? ? ? reader.readAsBinaryString(files);
? ? };

? ? return {
? ? ? headers,
? ? ? tableData,
? ? ? handleFileUpload,
? ? };
? },
};
</script>

<style scoped>
table {
? width: 100%;
? border-collapse: collapse;
}
th, td {
? border: 1px solid #ccc;
? padding: 8px;
? text-align: left;
}
</style>

3. 使用組件

在主應用文件（如 App.vue）中引入并使用該組件：

<template>
? <div id="app">
? ? <ExcelUpload />
? </div>
</template>

<script>
import ExcelUpload from './components/ExcelUpload.vue';

export default {
? name: 'App',
? components: {
? ? ExcelUpload,
? },
};
</script>

4. 功能說明

1. 文件上傳：通過 <input type="file"> 元素選擇 Excel 文件。

2. 文件讀取：使用 FileReader 讀取文件內容為二進制字符串 。

3. 解析為 JSON：使用 xlsx 庫將 Excel 數據轉換為 JSON 格式 。

4. 數據展示：將解析后的表頭和數據展示在表格中。

5. 擴展功能

• 錯誤處理：在文件讀取和解析過程中添加錯誤處理，提示用戶文件格式錯誤或解析失敗。

• 大文件優化：對于大文件，可以分頁顯示數據或使用異步加載。

• 自定義解析邏輯：根據實際需求，對數據進行格式轉換或校驗。

通過以上步驟，你可以在 Vue 3 項目中實現本地上傳 Excel 文件并解析為 JSON 數據的功能。