Maison >interface Web >tutoriel HTML >html页面里table导出为excel_html/css_WEB-ITnose
html页面里table导出为excel_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:09:101306parcourir
只要想不到，没有做不到，一直都不知道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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：css基础组件库（兼容低版本）_html/css_WEB-ITnoseArticle suivant：纯CSS实现页签切换效果_html/css_WEB-ITnose