使用“打印”按钮忽略表格单元格中的隐藏元素

Ignore hidden elements in a table cell using DataTables button Print

本文关键字：单元格 隐藏 元素 表格 打印 按钮 使用      更新时间：2023-09-26

我使用jQuery数据表与按钮扩展。我有打印按钮，可以在这个例子中看到。

我的表:

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="text-center">Active</th>
            <th class="text-center">Pipeline</th>
        </tr>
    </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td>121<span class="hidden">Hidden Text</span></td>
            </tr>
        </tbody>
</table>

但它显示在打印预览窗口和纸上:

Active Pipeline
100    121 Hidden Text

我想把它打印成:

Active Pipeline
100    121

如何排除类hidden的元素被打印?

默认情况下，jQuery DataTables在准备打印预览窗口时剥离HTML。这就是为什么CSS规则没有被应用，隐藏的文本显示在打印预览窗口和纸上。

<

解决方案/strong>

您需要自定义DataTables打印按钮并使用stripHtml: false选项，参见下面的示例代码:

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
       {
           extend: 'print',
           exportOptions: {
               stripHtml: false
           }               
       }        
    ]      
} );

我假设你有以下CSS规则来隐藏类为hidden的元素。

.hidden { display: none; }

相关文章：