javascript如何將網頁表格轉成Excel

隨著電子表格在商務管理和資料分析中的廣泛應用，將網頁表格轉換成Excel格式的需求也越來越高。而JavaScript的功能強大且可跨平台特點，使其成為實現此功能的最佳選擇。以下就介紹一種利用JavaScript實作將網頁表格轉換成Excel的方法。

1.引進JavaScript函式庫

首先需要引進必要的JavaScript函式庫－SheetJS和FileSaver。 SheetJS是一個強大的電子表格處理庫，它可以讀寫Excel、CSV和其他電子表格格式。 FileSaver庫則提供了一種簡單的方式來保存從瀏覽器產生的HTML或二進位資料。在HTML檔案中加入以下程式碼引入這兩個函式庫。

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

2.建立表格HTML程式碼

接下來需要在HTML頁面中建立表格用於展示資料。這裡我們建立一個包含表頭和資料的簡單表格。

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>40</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

3.寫JavaScript程式碼

現在我們開始寫JavaScript程式碼，實作將表格轉換成Excel的功能。

首先需要取得表格，使用document.getElementById()方法取得id為「table」的表格元素。

const table = document.getElementById('table');

然後透過table.rows取得表格中的行數和列數，建立一個空數組用來保存表格資料。

const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

接著需要遍歷表格中的所有行和列，將儲存格的文字資料存入data數組中。這裡使用雙重循環來實現。

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

最後使用SheetJS函式庫將data轉換成Excel格式的二進位數據，並使用FileSaver函式庫將其儲存到本機。這裡使用SheetJS的XLSX.writeFile()方法實作。

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

完整的JavaScript程式碼如下：

const table = document.getElementById('table');
const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

4.測試轉換結果

完成以上步驟後，在瀏覽器中開啟HTML文件，點選按鈕，將會自動下載一個名為「table.xlsx」的Excel檔案。

透過上述步驟，我們已經成功地將網頁表格轉換成了Excel格式。這種方法基於JavaScript，實現簡單，效率高，且可跨平台，非常適用於將網頁表格進行批量處理的情況，對於商務管理人員和資料分析師來說，無疑是一個很好的工具。

以上是javascript如何將網頁表格轉成Excel的詳細內容。更多資訊請關注PHP中文網其他相關文章！