<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) { return 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>
参考链接:https://blog.csdn.net/jesslu/article/details/77866040