HTML導出Excel是許多Web開發人員都會碰到的問題。導出Excel數據可以方便用戶直觀地瀏覽和編輯數據,同時也方便數據的備份與交換。本文將介紹如何使用HTML代碼導出Excel文件。
首先,生成Excel文件需要用到的庫為js-xlsx。我們需要在HTML中引入該庫文件,如下所示:
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>接下來需要準備我們需要導出的數據,這里以一個簡單的表格為例,代碼如下:
<table id="data"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>20</td> <td>女</td> </tr> </tbody> </table>接下來是核心代碼,我們需要使用js-xlsx庫中的方法將數據轉換成Excel文件。代碼如下:
<script> function exportExcel() { var wb = XLSX.utils.table_to_book(document.getElementById('data'), { sheet: "Sheet JS" }); var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "data.xlsx"); } function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } </script>在上述代碼中,exportExcel()函數負責生成Excel文件并提供下載鏈接,s2ab()函數將字符串轉換成ArrayBuffer對象,以便Blob()對象能夠正確處理。 最后,我們需要在一個按鈕或鏈接上綁定exportExcel()函數,以便用戶能夠點擊該按鈕或鏈接來導出Excel文件。如下所示:
<button onclick="exportExcel()">導出Excel</button>至此,我們就可以使用HTML代碼導出Excel文件了。