Html怎麼轉存成exel-html教學-PHP中文網

Html怎麼轉存成exel

PHPz

發布： 2024-02-21 22:48:04

原創

636 人瀏覽過

Html怎麼轉存成exel

HTML怎麼轉存為Excel，需要具體程式碼範例

導言：
在實際的工作中，有時我們需要將網頁中的資料匯出為Excel格式。 HTML是常見的網頁標記語言，而Excel則是常用的電子表格軟體，兩者格式不同，所以需要進行轉換。本文將介紹如何使用JavaScript和第三方函式庫來實作將HTML轉存為Excel檔案的功能，並給出具體的程式碼範例。

一、使用JavaScript實作HTML轉存為Excel

建立一個HTML表格
首先，我們需要在HTML中建立一個表格，將需要匯出的資料放入表格中。例如，以下是一個具有三行三列的表格：

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

登入後複製

新增匯出按鈕和事件監聽器
在HTML中新增一個按鈕，當點擊按鈕時觸發匯出事件。可以按照以下方式新增按鈕：

<button onclick="exportToExcel()">导出Excel</button>

登入後複製

接下來，我們需要為按鈕新增事件監聽器來觸發匯出功能。使用JavaScript編寫以下程式碼：

function exportToExcel() {
  // 导出表格逻辑
}

登入後複製

實作匯出邏輯，產生Excel檔案
要實作匯出的邏輯，我們可以使用JavaScript將HTML表格中的內容轉換為Excel檔案。在匯出的函數中，我們需要執行以下步驟：

（1）建立一個新的Excel工作簿：

var wb = new ExcelJS.Workbook();
var ws = wb.addWorksheet('Sheet 1');

登入後複製

（2）遍歷HTML表格中的所有行和列，並將資料填入Excel工作表中：

var rows = document.getElementById("myTable").rows;
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  for (var j = 0; j < cells.length; j++) {
    ws.getCell(i + 1, j + 1).value = cells[j].innerText;
    // 根据需要设置单元格样式
    ws.getCell(i + 1, j + 1).alignment = { horizontal: 'left' };
  }
}

登入後複製

（3）儲存Excel檔案：

wb.xlsx.writeBuffer().then(function(buffer) {
  saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'data.xlsx');
});

登入後複製

將這些程式碼新增至「exportToExcel」函數中，完整的程式碼如下：

function exportToExcel() {
  var wb = new ExcelJS.Workbook();
  var ws = wb.addWorksheet('Sheet 1');

  var rows = document.getElementById("myTable").rows;
  for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
      ws.getCell(i + 1, j + 1).value = cells[j].innerText;
      ws.getCell(i + 1, j + 1).alignment = { horizontal: 'left' };
    }
  }

  wb.xlsx.writeBuffer().then(function(buffer) {
    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'data.xlsx');
  });
}

登入後複製

二、使用第三方函式庫實作HTML轉存為Excel
除了JavaScript原生操作外，我們還可以使用第三方函式庫來實作HTML轉存為Excel的功能，例如「AlaSQL」函式庫。以下是使用AlaSQL函式庫的具體程式碼：

引入AlaSQL函式庫和ExcelJS函式庫
首先，我們需要在HTML中引入AlaSQL函式庫和ExcelJS函式庫的腳本，可以透過以下方式引進：

<script src="https://cdn.jsdelivr.net/npm/alasql"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs"></script>

登入後複製

修改匯出函數
在匯出函數中，我們使用AlaSQL函式庫中的「alasql」方法將HTML表格轉換為Excel檔案。修改導出函數的程式碼如下：

function exportToExcel() {
  var tableData = [];
  var rows = document.getElementById("myTable").rows;
  for (var i = 0; i < rows.length; i++) {
    var rowData = [];
    var cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
      rowData.push(cells[j].innerText);
    }
    tableData.push(rowData);
  }

  var opts = {
    sheetid: 'Sheet 1',
    headers: true,
    skipHeader: true
  };

  var res = alasql('SELECT * INTO XLSX("data.xlsx",?) FROM ?', [opts, [tableData]]);
}

登入後複製

新增按鈕和事件監聽器
同樣，在HTML中新增按鈕並新增事件監聽器：

<button onclick="exportToExcel()">导出Excel</button>

登入後複製

完整的HTML檔案範例程式碼如下：



  
    
    HTML转存为Excel
    
    
  

  
    
      
        姓名
        年龄
        性别
      
      
        张三
        25
        男
      
      
        李四
        30
        女
      
    
  
    <button onclick="exportToExcel()">导出Excel</button>
    
    <script>
      function exportToExcel() {
        var tableData = [];
        var rows = document.getElementById("myTable").rows;
        for (var i = 0; i < rows.length; i++) {
          var rowData = [];
          var cells = rows[i].cells;
          for (var j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText);
          }
          tableData.push(rowData);
        }

        var opts = {
          sheetid: 'Sheet 1',
          headers: true,
          skipHeader: true
        };

        var res = alasql('SELECT * INTO XLSX("data.xlsx",?) FROM ?', [opts, [tableData]]);
      }
    </script>