使用 JavaScript 將 HTML 表格匯出到 Excel
Kushank Singh
2023年1月30日
2021年10月2日
-
在 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
建構函式將其轉換為所需的檔案。