<table>匯出excal
阿新 • • 發佈：2018-12-06
<table>匯出excal
將<table>匯出為excal檔案，這裡介紹兩種方法。
1.直接寫程式碼，拼接出excal檔案的字串，然後直接用a標籤下載。本人沒有是試過，在此粘下程式碼留念。
<html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript"> function base64 (content) {View Codereturn window.btoa(unescape(encodeURIComponent(content))); } /* *@tableId: table的Id *@fileName: 要生成excel檔案的名字（不包括字尾，可隨意填寫） */ function tableToExcel(tableID,fileName){ var table = document.getElementById(tableID); var excelContent = table.innerHTML;var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>"; excelFile += "<body><table>"; excelFile += excelContent; excelFile += "</table></body>"; excelFile += "</html>"; var link = "data:application/vnd.ms-excel;base64," + base64(excelFile); var a = document.createElement("a"); a.download = fileName+".xlsx"; a.href = link; a.click(); } </script> </head> <body> <button type="button" onclick="tableToExcel('item','data')">匯出</button> <table id="item"> <tr> <th>編號</th> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>1</td> <td>小明</td> <td>19</td> </tr> <tr> <td>2</td> <td>小芳</td> <td>20</td> </tr> <tr> <td>3</td> <td>大軍</td> <td>22</td> </tr> </table> </body> </html>
2.用jquery的外掛：jquery.table2excel.js
這個就更簡單了，只有5個配置項。
$('button').click(function(){ //下載按鈕
$("#datatable").table2excel({ //table標籤id
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
})
// table2excel外掛的可用配置引數有：
//
// exclude：不被匯出的表格行的CSS class類。
// name：匯出的Excel文件的名稱。
// filename：Excel檔案的名稱。
// exclude_img：是否匯出圖片。
// exclude_links：是否匯出超連結
// exclude_inputs：是否匯出輸入框中的內容。
完整程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <table border="0" cellspacing="0" cellpadding="0" id="datatable" class="xd_table_sj"> <tbody> <tr> <td><div align="center" id="titlelable">起始時間</div></td> <td><div align="center" id="titlelable">通訊地點</div></td> <td><div align="center" id="titlelable">上網方式</div></td> <td><div align="center" id="titlelable">總時長</div></td> <td><div align="center" id="titlelable">總流量</div></td> <td><div align="center" id="titlelable">套餐優惠</div></td> <td><div align="center" id="titlelable">優惠或減免</div></td> <td><div align="center" id="titlelable">通訊費</div></td> <td><div align="center" id="titlelable">終端型別</div></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 01:57:05</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.001</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> </tbody> </table> <button>匯出EXCEL</button> <script src="js/jquery.js"></script> <script src="js/jquery.table2excel.js"></script> <script> $('button').click(function(){ console.log(1) $("#datatable").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "myFileName", exclude_img: true, exclude_links: true, exclude_inputs: true }); }) // table2excel外掛的可用配置引數有： // // exclude：不被匯出的表格行的CSS class類。 // name：匯出的Excel文件的名稱。 // filename：Excel檔案的名稱。 // exclude_img：是否匯出圖片。 // exclude_links：是否匯出超連結 // exclude_inputs：是否匯出輸入框中的內容。 </script> </body> </html>View Code
參考連結：https://blog.csdn.net/jesslu/article/details/77866040