有条件地向“打印”视图中的数据表行添加样式

Question

我正在尝试在数据表打印视图中设置特定行的样式。我有一个表，其中包含财务项目行。它们按发票编号分组，发票完成后，将显示摘要行：此屏幕截图显示了报表的打印视图。我想做的是将“摘要”行设置为打印视图的更明显的颜色。我知道我可能不得不修改databables的打印自定义功能，但是根据一些研究，类不会导出打印视图，因此我无法设置行的类或ID的样式。我似乎找不到有关此特定问题的任何文章，因此我不完全确定从哪里开始，但以下是我当前用于生成打印视图的代码：customize: function ( win ) {            $(win.document.body)                .css( 'font-size', '10pt' )                .prepend(                    `<style>@page{size: landscape;}</style>                    <div class="container">                        <div style="width:100%;">                            </div>                            <div style="float: right;">                                <h2>Payment ID: ` + $('#ddl_payment_payment').val() + `</h2>                                <h4>Payment Date: ` + paymentTable.cell(0,3).data() + `</h3>                                <h4>Sub-contractor: ` + $('#ddl_payment_subContractor').val() + `</h3>                            </div>                        </div>                    </div>`                )                .append(                    `<div class="container">                        <div style="float:right;">                            <h4>Total: ` + $('#span_paymenttotal').html() + `</h1>                        </div>                    </div>`                );            $(win.document.body).find( 'table' )                .addClass( 'compact' )                .css( 'font-size', 'inherit' );            $(win.document.body).find('summaryRow')                    .css('color', 'red');

Answer 1

下面是将自定义格式添加到数据表的打印视图的一种方法。

首先，下面是 HTML 数据表：

以下是打印视图的外观：

实现：

<script type="text/javascript">

  $(document).ready(function() {

    $('#example').DataTable({

      dom: 'Bfrtip',

      buttons: [

        {

          extend: 'print',

          autoPrint: false,

          exportOptions: {

            format: {

              body: function ( inner, rowidx, colidx, node ) {

                if (node.classList.contains('summary')) {

                  return '<span class="summary" style="color:red; font-style:italic;">' + inner + '</span>';

                } else {

                  return inner;

                }

              }

            }

          },

          customize: function ( win, butt, tbl ) {

            $(win.document.body).find('span.summary').css('font-size', '20px');

            $(win.document.body).find('span.summary').parent().css('background-color', 'yellow');

          }

        } 

      ]

    });

  });

</script>

注释：

在我的数据中，我已经在那些我想要操作的单元格中插入了一个类 - 例如：summary

<tr>

    <td class="summary">Bradley Greer</td>

    <td class="summary">Software Engineer</td>

    <td class="summary">London</td>

    <td class="summary"></td>

    <td class="summary">2012/10/13</td>

    <td class="summary">$132,000</td>

 /tr>

没有与此类名关联的样式。

对于我的演示，我只是对这些进行了硬编码。但是 DataTables 提供了各种方法来动态处理这种情况，作为表初始化和数据处理的一部分。

然后我使用该功能（在此页面上描述）。我用它来改变使用该类的所有单元格的数据内容（特别是字体颜色）。format.bodysummary

这里的关键是创建一个跨度，该范围将剥离的类名添加回去。如您所见，打印处理器会从打印视图中删除所有此类手动添加的类和样式。

现在，我可以使用该函数（在此页面上记录）来使用我新添加的类名。对于每个相关的，我找到父项并调整其样式。customizespantd

最后一点：要打印出bacground阴影，我必须从打印菜单中选择一个“打印背景”选项 - 不过，这可能只是我的打印机。

希望有所帮助 - 或者至少为您的特定需求提供一些想法。