layui 導出excel複雜表頭

時間  2019-11-09
標籤 layui 導出 excel 複雜 表頭 欄目 Microsoft Office 简体版
原文   原文鏈接

衆所周知 layui的導出功能很好用，可是今天我要給你們推薦一個更好用的

你們來到這裏想必也是由於layui沒法知足 【導出Excle複雜表頭】 的業務需求而來，這裏廢話很少說但仍是強調一點，若是你是用的layui服務渲染的表格如：css

這種狀況我的建議移步至 阿政kris*的博客html

首先 下載案例

把文解壓 來到 demo目錄下,複製如下內容到 index.html 文件git

<!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>

運行便可github

舒適提示 若是下載的Excle 沒法打開 請解除綁定

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程