html中的table导出Excel
演示地址:
http://www.jq22.com/yanshi3312
具体代码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>table export</title></head> <body> <table id="table1"> <tbody> <tr> <td>文字1</td> <td>咨询</td> <td>测试</td></tr> <tr> <td>文字1</td> <td>咨询</td> <td>测试</td></tr> <tr> <td>文字1</td> <td>咨询</td> <td>测试</td></tr> <tr> <td>文字1</td> <td>咨询</td> <td>测试</td></tr> <tr> <td>文字1</td> <td>咨询</td> <td>测试</td></tr> <tr> <td>文字1</td> <td>咨询</td> <td>测试</td></tr> </tbody> </table> <table id="table2"> <thead> <tr> <td>标题一</td> <td>标题二</td> <td>标题三</td></tr> </thead> <tbody> <tr> <td> <a href="#" target="_blank">文字2</a></td> <td>咨询</td> <td>测试</td></tr> <tr> <td> <a href="#" target="_blank">文字2</a></td> <td>咨询</td> <td>测试</td></tr> <tr> <td> <a href="#" target="_blank">文字2</a></td> <td>咨询</td> <td>测试</td></tr> <tr> <td> <a href="#" target="_blank">文字2</a></td> <td>咨询</td> <td>测试</td></tr> <tr> <td> <a href="#" target="_blank">文字2</a></td> <td>咨询</td> <td>测试</td></tr> <tr> <td> <a href="#" target="_blank">文字2</a></td> <td>咨询</td> <td>测试</td></tr> </tbody> </table> <div id="export"> <a data-type="json" href="javascript:;">导出json</a> <a data-type="txt" href="javascript:;">导出txt</a> <a data-type="csv" href="javascript:;">导出csv</a> <a data-type="xls" href="javascript:;">导出excel</a> <a data-type="doc" href="javascript:;">导出word</a></div> <script src="Blob.js"></script> <script src="FileSaver.js"></script> <script src="tableExport.js"></script> <script>var $exportLink = document.getElementById('export'); $exportLink.addEventListener('click', function(e) { e.preventDefault(); if (e.target.nodeName === "A") { tableExport('table1', '测试测试', e.target.getAttribute('data-type')) } }, false);</script> </body> </html>
源码下载: