如何在 html 中獲取 excel 數據？導入 excel 文件：使用 元素。解析 excel 文件：使用 xlsx 庫或瀏覽器功能。獲取數據：獲取工作表對象，包含行和列數據。顯示數據：使用 html 元素（例如表格）展示數據。
通過 HTML 從 Excel 獲取數據：全面指南
在現代 Web 開發中，從各種來源獲取數據至關重要。其中一個常見來源是 Microsoft Excel。通過 HTML 從 Excel 中獲取數據可以為你的應用程序增添很多價值。
本指南將逐步指導你如何使用 HTML 從 Excel 文件中獲取數據。
步驟 1：導入 Excel 文件
<input type="file" id="excel-file-input">
登錄后復制
此代碼將創建一個文件輸入元素，用戶可以使用該元素選擇要導入的 Excel 文件。
步驟 2：解析 Excel 文件
導入文件后，你必須將其解析為 HTML 可讀的格式。你可以使用第三方庫（例如 [xlsx](https://github.com/SheetJS/js-xlsx)）或內置的瀏覽器功能來實現此目的。
使用 xlsx 庫：
const reader = new FileReader();
reader.onload = function() {
const data = reader.result;
const workbook = XLSX.read(data, {type: 'binary'});
};
reader.readAsBinaryString(file);
登錄后復制
步驟 3：獲取數據
解析文件后，你可以使用 workbook 對象獲取數據。它包含工作表對象數組，其中包含行和列數據。
獲取特定單元格的值：
const cellValue = workbook.Sheets.Sheet1['A1'].v;
登錄后復制
步驟 4：將數據顯示在 HTML 中
獲取數據后，你可以使用 HTML 元素將其顯示在頁面上。例如，可以使用表格：
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
</tbody>
</table>
登錄后復制
然后，可以使用 JavaScript 動態地填充表格中的數據：
const tableBody = document.querySelector('tbody');
for (const row of data) {
const newRow = document.createElement('tr');
const name = document.createElement('td');
name.innerText = row.name;
const age = document.createElement('td');
age.innerText = row.age;
newRow.appendChild(name);
newRow.appendChild(age);
tableBody.appendChild(newRow);
}
登錄后復制
實戰案例：
考慮一個在線商店，需要從 Excel 文件中獲取產品列表。通過遵循本指南中的步驟，你可以輕松地導入文件、解析數據并將其顯示在 Web 頁面上，以便客戶瀏覽產品。
該指南提供了從 Excel 文件獲取數據的逐步說明，包括導入、解析和顯示數據。通過遵循這些步驟，你可以輕松地將 Excel 數據整合到你的 Web 應用程序中。
