layui 导出excel复杂表头

众所周知 layui的导出功能很好用,但是今天我要给大家推荐一个更好用的

大家来到这里想必也是因为layui无法满足 【导出Excle复杂表头】 的业务需求而来,这里废话不多说但还是强调一点,如果你是用的layui服务渲染的表格如:

这种情况个人建议移步至 阿政kris*的博客

首先 下载案例

把文解压 来到 demo目录下,复制以下内容到 index.html 文件


<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8" />
        <title>table2excel | rusty1s</title>

        <link rel="stylesheet" type="text/css" href="style.css" />

        <script src="../dist/table2excel.js"></script>
    </head>

    <body>

        <table data-excel-name="A very important table">
            <thead>
                <tr>
                    <th><span>1</span></th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>a</th>
                    <td data-timestamp="1468834644032">18.07.2016 11:37:24</td>
                    <td>a2</td>
                    <td style="display: none">hidden</td>
                    <td>a3</td>
                </tr>
                <tr>
                    <th>b</th>
                    <td colspan="2">b1+b2</td>
                    <td>b3</td>
                </tr>
                <tr>
                    <th>c</th>
                    <td rowspan="2">c1+d1</td>
                    <td>c2</td>
                    <td rowspan="2">c3+d3</td>
                </tr>
                <tr>
                    <th>d</th>
                    <td>d2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">4 entries</td>
                </tr>
            </tfoot>
        </table>

        <table data-excel-name="Another table">
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>e</th>
                    <td>e1</td>
                    <td>e2</td>
                    <td>e3</td>
                </tr>
                <tr>
                    <th>f</th>
                    <td><input type="text" value="f1" /></td>
                    <td>
                        <select>
                            <option>f2.1</option>
                            <option>f2.2</option>
                            <option>f2.3</option>
                        </select>
                    </td>
                    <td><textarea>f3</textarea></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">2 entries</td>
                </tr>
            </tfoot>
        </table>

        <table data-excel-name="A very important table" class="layui-table" id="Out_data">
        <thead>
        <tr>
          <th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>
          <th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>
          <th lay-data="{align:'center'}" colspan="5">地址1</th>
          <th lay-data="{align:'center'}" colspan="2">地址2</th>
          <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作</th>
        </tr>
        <tr>
          <th lay-data="{field:'province'}" rowspan="2">省</th>
          <th lay-data="{field:'city'}" rowspan="2">市</th>
          <th lay-data="{align:'center'}" colspan="3">详细</th>
          <th lay-data="{field:'province'}" rowspan="2">省</th>
          <th lay-data="{field:'city'}" rowspan="2">市</th>
        </tr>
        <tr>
          <th lay-data="{field:'street'}" >街道</th>
          <th lay-data="{field:'address'}">小区</th>
          <th lay-data="{field:'house'}">单元</th>
        </tr>
      </thead>

            <tbody>
                <tr >
                    <td >
                        <div >张小三</div>
                    </td>
                    <td >
                        <div >18</div>
                    </td>
                    <td >
                        <div >浙江</div>
                    </td>
                    <td >
                        <div >杭州</div>
                    </td>
                <td >
                        <div >西溪街道</div>
                    </td>
                    <td data-field="address" data-key="2-2-1" class="">
                        <div class="layui-table-cell laytable-cell-2-2-1">西溪花园</div>
                    </td>
                    <td data-field="house" data-key="2-2-2" class="">
                        <div class="layui-table-cell laytable-cell-2-2-2">30栋1单元</div>
                    </td>
                    <td data-field="province" data-key="2-1-3" class="">
                        <div class="layui-table-cell laytable-cell-2-1-3">浙江</div>
                    </td>
                    <td data-field="city" data-key="2-1-4" class="">
                        <div class="layui-table-cell laytable-cell-2-1-4">杭州</div>
                    </td>
                    <td data-field="4" data-key="2-0-4" align="center" data-off="true" class="layui-table-col-special">
                        <div class="layui-table-cell laytable-cell-2-0-4">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
                        </div>
                    </td>
                </tr>   
                
                </tbody>
        </table>

        <button id="export">Export to excel</button>

        <script>
            var table2excel = new Table2Excel();

            document.getElementById('export').addEventListener('click', function() {
                table2excel.export(document.getElementById('Out_data'));
            });
        </script>

    </body>

</html>

运行即可

猜你喜欢

转载自www.cnblogs.com/userzf/p/11084290.html