透過 HTML 從 Excel 取得資料：全面指南

如何在 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 應用程式中。

以上是透過 HTML 從 Excel 取得資料：全面指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！