使用 JavaScript 將 HTML 表格匯出到 Excel

Kushank Singh 2023年1月30日 2021年10月2日
  1. 在 JavaScript 中使用 TabletoExcel 庫將 HTML 表格匯出到 Excel
  2. 使用 TableExport 庫將 HTML 表格匯出到 JavaScript 中的 Excel 檔案
  3. 使用 jQuery 庫將 HTML 表格匯出到 JavaScript 中的 Excel 檔案
使用 JavaScript 將 HTML 表格匯出到 Excel

Excel 電子表格用於將表格資料儲存在一張或多張工作表中。

在本教程中,我們將學習如何使用 JavaScript 將 HTML 表格匯出到 Excel。

在 JavaScript 中使用 TabletoExcel 庫將 HTML 表格匯出到 Excel

TableToExcel 庫可用於將 HTML 表格匯出到 Excel 檔案。我們將使用 convert() 方法進行必要的轉換。

請參考下面的程式碼。

<button id="btnExport" onclick="exportReportToExcel(this)">Export HTML Table</button>

<script type="text/javascript">
  function exportReportToExcel() {
    let table = document.getElementsByID("table");
    TableToExcel.convert(table[0], {
      name: `file.xlsx`,
      sheet: {
        name: 'Sheet 1'
      }
    });
  }
</script>

在上面的示例中,我們使用 getElementsbyID() 函式獲取所需的表格元素。我們將其匯出到 excel 檔案。還使用 namesheet 屬性提供了檔案和工作表的名稱。

使用 TableExport 庫將 HTML 表格匯出到 JavaScript 中的 Excel 檔案

TableExport 庫可以將 HTML 表格匯出為 XLSX、XLS、CSV 或文字檔案。該庫使用簡單,並提供了廣泛的屬性來自定義最終檔案。

參考下面的程式碼。

<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/5.2.0/js/tableexport.min.js" integrity="sha512-XmZS54be9JGMZjf+zk61JZaLZyjTRgs41JLSmx5QlIP5F+sSGIyzD2eJyxD4K6kGGr7AsVhaitzZ2WTfzpsQzg==" crossorigin="anonymous" referrerpolicy="no-referrer">
TableExport(document.getElementsByTagName("table"), {
    filename: 'excelfile',            
    sheetname: "sheet1"                     
});
</script>

在上面的示例中,我們使用 getElementsByTagName() 函式訪問所需的 HTML 表。我們使用 filenamesheetname 屬性來設定最終檔案的名稱和工作表的名稱。

請注意,為了包含 TableExport 庫,我們在 HTML 程式碼的 script 標籤中新增了該庫的原始碼。

使用 jQuery 庫將 HTML 表格匯出到 JavaScript 中的 Excel 檔案

我們將使用 table2excel 外掛將 HTML 表格資料匯出到 Excel 電子表格。這是一個輕量級的 jQuery 外掛。

參考下面的程式碼。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", type="text/javascript">
  function Export() {
    $("#table").table2excel({
      filename: "file.xls"
    });
  }
</script>

我們使用 $(table) 訪問了所需的表。table2excel 建構函式將其轉換為所需的檔案。

相關文章 - JavaScript Excel