Heim > Artikel > Web-Frontend > html页面里table导出为excel_html/css_WEB-ITnose
html页面里table导出为excel_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:09:101276Durchsuche
只要想不到，没有做不到，一直都不知道html里table元素可直接导出为excel，太牛逼了！
这其中用到一个jquery的插件table2excel
使用方法也很简单：
1 。 包含必要的文件
<script src="src/1.11.1/jquery.min.js"></script><script src="src/jquery.table2excel.js"></script>
2。 创建导出按钮
<button>Export</button>
3。 给导出按钮添加事件
$(".table2excel").table2excel({ exclude: ".noExl", // 不想导出的行加上class='noExl'即可 name: "Excel Document Name", // excel文档名 filename: "myFileName" // excel文件名}); 完整的看下DEMO
<!DOCTYPE html><html> <head> <title>jQuery Boilerplate</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="../src/jquery.table2excel.js"></script> </head> <body> <table class="table2excel" data-tableName="Test Table 1"> <thead> <tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr> <tr><td>This Should get exported as a header</td><td>This should too</td></tr> </thead> <tbody> <tr><td>data1a</td><td>data1b</td></tr> <tr><td>data2a</td><td>data2b</td></tr> </tbody> <tfoot> <tr><td colspan="2">This footer spans 2 cells</td></tr> </tfoot> </table> <table class="table2excel" data-tableName="Test Table 2"> <thead> <tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr> <tr><td>This Should get exported as a header</td><td>This should too</td></tr> </thead> <tbody> <tr><td>data1a</td><td>data1b</td></tr> <tr><td>data2a</td><td>data2b</td></tr> </tbody> <tfoot> <tr><td colspan="2">This footer spans 2 cells</td></tr> </tfoot> </table> <script> $(function() { $(".table2excel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "myFileName" }); }); </script> </body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css基础组件库（兼容低版本）_html/css_WEB-ITnoseNächster Artikel：纯CSS实现页签切换效果_html/css_WEB-ITnose