项目中要用到导出功能,因为是自定义模板的表格。所以用不了框架自带的导出按钮。因此就利用jquery的插件jquery.table2excel.js进行导出。jquery和table2excel.js需要自己引入
话不多说,直接上代码:
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>数据导出</title><link rel=\"stylesheet\" href=\"../../layui/css/layui.css\" media=\"all\"><meta http-equiv=\"X-UA-Compatible\"content=“IE=edge” /><meta http-equiv=\"Access-Control-Allow-Origin\" content=\"*\"><script src=\"../../js/jquery-2.1.0.min.js\"></script><script src=\"../../js/jquery.table2excel.js\"></script></head><style>table{display:none;}.layui-form-item-text {text-align: center;}table {text-align: center;}.layui-table th {text-align: center;}.layui-btn {float: left;margin-top: 10px;}.layui-table thead tr {background: #fff;}.layui-table tbody tr:hover {background: #fff;}.layui-table {margin: 0;border-width: 1px;}.layui-bg-green {margin-top: 5px;}.layui-form-add {min-height: 70px;border: 0;}.layui-form-item.layui-form-item-add.tttttt {width: 35%;}.layui-form-item.layui-form-item-add.tttttt .layui-form-label-add {width: 20%;}.layui-form-item.layui-form-item-add.tttttt .layui-input-block-add {width: 30%;margin-left: 2%;}</style><body><table class=\"table2excel\" data-tableName=\"Test Table 1\" ><colgroup><col width=\"15%\"><col width=\"15%\"><col width=\"15%\"><col width=\"15%\"><col width=\"15%\"><col width=\"15%\"></colgroup><td colspan=\"6\" class=\"layui-form-item layui-form-item-text\">XXX属性</th><div class=\"layui-form\"><tr><td colspan=\"2\">XXX</th><td colspan=\"4\"></td></tr><tr><td colspan=\"2\">XXX</th><td colspan=\"4\"></td></tr><tr><td colspan=\"2\">XXX</th><td colspan=\"4\"></td></tr><tr><td colspan=\"2\">电压等级</th><td colspan=\"4\"></td></tr><tr><td colspan=\"2\">XXX</th><td colspan=\"4\"></td></tr><tr><td colspan=\"2\">XXX</th><td colspan=\"4\"></td></tr></div><th colspan=\"6\" class=\"layui-form-item layui-form-item-text\">监测数据</th><div class=\"layui-form\"><tr><th>XXX</th><th>XXX</th><th>XXX</th><th>XXX</th><th>XXX</th><th>XXX</th></tr><tr><td>2020-03-20</td><td>34</td><td>45</td><td>66</td><td>12</td><td>正常</td></tr><tr><td>2020-03-21</td><td>34</td><td>45</td><td>66</td><td>12</td><td>正常</td></tr><tr><td>2020-03-22</td><td>34</td><td>45</td><td>66</td><td>12</td><td>正常</td></tr><tr><td>2020-03-23</td><td>34</td><td>45</td><td>66</td><td>12</td><td>正常</td></tr><tr><td>2020-03-24</td><td>34</td><td>45</td><td>66</td><td>12</td><td>正常</td></tr></div></table><button class=\"exportToExcel\">导出</button><script>$(function() {$(\".exportToExcel\").click(function(e){var table = $(this).prev(\'.table2excel\');if(table && table.length){var preserveColors = (table.hasClass(\'table2excel_with_colors\') ? true : false);$(table).table2excel({exclude: \".noExl\",name: \"Excel Document Name\",filename: \"开关柜\" + new Date().toISOString().replace(/[\\-\\:\\.]/g, \"\") + \".xls\",fileext: \".xls\",exclude_img: true,exclude_links: true,exclude_inputs: true,preserveColors: preserveColors});}});});</script></body></html>
demo可以直接用,在IE也可以。插件可以在github上边找。我不知道这里改怎么上传。
效果就直接如图:
按理说td里边的都应该是左对齐。我把源码改了,让它自己居中了。这样子好看嘛