使用 JavaScript 將 HTML 表格匯出到 Excel
Kushank Singh
2023年1月30日
-
在 JavaScript 中使用
TabletoExcel庫將 HTML 表格匯出到 Excel -
使用
TableExport庫將 HTML 表格匯出到 JavaScript 中的 Excel 檔案 -
使用
jQuery庫將 HTML 表格匯出到 JavaScript 中的 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 檔案。還使用 name 和 sheet 屬性提供了檔案和工作表的名稱。
使用 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 表。我們使用 filename 和 sheetname 屬性來設定最終檔案的名稱和工作表的名稱。
請注意，為了包含 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 建構函式將其轉換為所需的檔案。