那些遇到过的问题

数据表导出到 excel <选择选项>

Mad*_*Cat 4 html javascript datatable excel

在我的测试页中，我插入了一个选项列表，我只需要将选定的值导出到 excel，但现在我的 excel 结果包括“选择选项”的所有列表。

我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Export Excel "SELECT OPTION" </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>     
    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
    
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
    <script>
    
    $(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf'
        ]
    } );
} );
    
    </script>
    
        <div>
     <table id="example" class="display" cellspacing="0" border="1" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td><select class="form-control">
                        <option value="Edinburgh" selected>Edinburgh</option>
                        <option value="Singapore"         >Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td><select class="form-control">
                        <option value="Edinburgh"     >Edinburgh</option>
                        <option value="Singapore"     >Singapore</option>
                        <option value="Tokyo" selected>Tokyo    </option>
                    </select>    
                </td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td><select class="form-control">
                        <option value="Edinburgh"     >Edinburgh</option>
                        <option value="Singapore"     >Singapore</option>
                        <option value="Tokyo" selected>Tokyo    </option>
                    </select>    
                </td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
                        <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td><select class="form-control">
                        <option value="Edinburgh"         >Edinburgh</option>
                        <option value="Singapore" selected>Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td><select class="form-control">
                        <option value="Edinburgh" selected>Edinburgh</option>
                        <option value="Singapore"         >Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td><select class="form-control">
                        <option value="Edinburgh"         >Edinburgh</option>
                        <option value="Singapore" selected>Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
     </table>
            
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

除了包含选项列表（爱丁堡，新加坡，东京）中的所有值的“办公室”列（“C”）之外，在 excel 中导出的结果是可以的。 导出excel结果

Zer*_*ero 5

您需要定义exportOptions：这是您的代码

var buttonCommon = { exportOptions: { format: { body: function(data, column, row, node) {if (column == 2) { return $(data).find("option:selected").text() } else return data } } } };

然后在定义按钮时，使用这个： buttons: [ 'copy', $.extend(true, {}, buttonCommon, { extend: "csv" }),$.extend(true, {}, buttonCommon, { extend: "excel" }), $.extend(true, {}, buttonCommon, { extend: "pdf" })]

<!DOCTYPE html>
<html>
    <head>
        <title>Test Export Excel "SELECT OPTION" </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>     
    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
    
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
    <script>
    var buttonCommon = {
            exportOptions: {
                format: {
                    body: function (data, row, column, node) {
                        // if it is select
                        if (column == 2) {
                            return $(data).find("option:selected").text()
                        } else return data
                    }
                }
            }
        };
    $(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
                'copy', $.extend(true, {}, buttonCommon, {
                    extend: "csv"
                }), $.extend(true, {}, buttonCommon, {
                    extend: "excel"
                }), $.extend(true, {}, buttonCommon, {
                    extend: "pdf"
                })
            ]
    } );
} );
    
    </script>
    
        <div>
     <table id="example" class="display" cellspacing="0" border="1" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td><select class="form-control">
                        <option value="Edinburgh" selected>Edinburgh</option>
                        <option value="Singapore"         >Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td><select class="form-control">
                        <option value="Edinburgh"     >Edinburgh</option>
                        <option value="Singapore"     >Singapore</option>
                        <option value="Tokyo" selected>Tokyo    </option>
                    </select>    
                </td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td><select class="form-control">
                        <option value="Edinburgh"     >Edinburgh</option>
                        <option value="Singapore"     >Singapore</option>
                        <option value="Tokyo" selected>Tokyo    </option>
                    </select>    
                </td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
                        <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td><select class="form-control">
                        <option value="Edinburgh"         >Edinburgh</option>
                        <option value="Singapore" selected>Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td><select class="form-control">
                        <option value="Edinburgh" selected>Edinburgh</option>
                        <option value="Singapore"         >Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td><select class="form-control">
                        <option value="Edinburgh"         >Edinburgh</option>
                        <option value="Singapore" selected>Singapore</option>
                        <option value="Tokyo"             >Tokyo    </option>
                    </select>    
                </td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
     </table>
            
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

小智 5

我这边的另一个解决方案。我通过在表格末尾创建一个重复的列（但使用文本而不是下拉按钮）并使用“不显示”隐藏它来解决这个问题。

使用 jQuery 使用另一列中选定的下拉数据更新隐藏列。然后我隐藏了导出时的下拉列

导出选项: { 列: 列: [ 0, 1, 3, 4, 5, 6] }

（第 2 列有下拉菜单）

<!DOCTYPE html>
<html>
<head>
<title>Test Export Excel "SELECT OPTION" </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>     
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
    {
        extend: 'excel',
        text: 'Excel',
        exportOptions: {
             columns: [ 0, 1, 3, 4, 5, 6]
        }
    }
],
select: true
} );
} );
</script>

<div>
<table id="example" class="display" cellspacing="0" border="1" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th style="display: none;">Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td><select class="form-control">
                <option value="Edinburgh" selected>Edinburgh</option>
                <option value="Singapore">Singapore</option>
                <option value="Tokyo">Tokyo    </option>
            </select>    
        </td>
        <td style="display: none;">Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td><select class="form-control">
                <option value="Edinburgh">Edinburgh</option>
                <option value="Singapore">Singapore</option>
                <option value="Tokyo" selected>Tokyo    </option>
            </select>    
        </td>
        <td style="display: none;">Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td><select class="form-control">
                <option value="Edinburgh">Edinburgh</option>
                <option value="Singapore">Singapore</option>
                <option value="Tokyo" selected>Tokyo</option>
            </select>    
        </td>
        <td style="display: none;">Tokyo</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
                <tr>
        <td>Shad Decker</td>
        <td>Regional Director</td>
        <td><select class="form-control">
                <option value="Edinburgh">Edinburgh</option>
                <option value="Singapore" selected>Singapore</option>
                <option value="Tokyo">Tokyo    </option>
            </select>    
        </td>
        <td style="display: none;">Singapore</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Michael Bruce</td>
        <td>Javascript Developer</td>
        <td><select class="form-control">
                <option value="Edinburgh" selected>Edinburgh</option>
                <option value="Singapore">Singapore</option>
                <option value="Tokyo">Tokyo    </option>
            </select>    
        </td>
        <td style="display: none;">Edinburgh</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td><select class="form-control">
                <option value="Edinburgh">Edinburgh</option>
                <option value="Singapore" selected>Singapore</option>
                <option value="Tokyo">Tokyo    </option>
            </select>    
        </td>
        <td style="display: none;">Singapore</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
    </tr>
</tbody>
</table>
    
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

9126 次

最近记录：

5 年，1 月 前
使用select元素从datatable导出数据会从select元素导出每个选项 6
更多相关链接
相关归档
"Splats"在CoffeeScript教程中的含义是什么？ 113
尝试使用fetch和pass in模式:no-cors 101
Object.values()的替代版本 55
Node.js安装:未安装openssl 44
如何在VS Code中启用HTML实体突出显示？ 22
李项目两行.第二行没有保证金 18
通过VBA选择Range类失败的方法 16
强制用户根据其他单元格值在单元格中输入值 5
C#与Excel的模数有何不同？ 5
将json数据拆分为excel中的列 3
难疑归档
"yield"关键字有什么作用？ 9664
如何检查字符串是否包含JavaScript中的子字符串？ 7430
如何在Python中安全地创建嵌套目录？ 3909
如何在特定索引(JavaScript)的数组中插入项？ 2709
我怎样才能存储特定文件？ 1422
在Python中检查类型的规范方法是什么？ 1171
获取对象类型的名称 1159
Python类继承对象 1095
如何在Ruby中将字符串转换为小写或大写 1081
网格布局上的手势检测 1076