Question

如何使用DataTable中的“打印”按钮打印自定义元素？

以下是一个示例：JSFIDDLE

我想按“打印”时，此代码也会打印出来：

<div id="PRINT_HERE_TOO" class="test">
   <h1>
      Print Here Too!
   </h1>
</div>

我清楚了吗？谢谢！

Answer 1

在您的代码中将其用作JavaScript，并了解如何根据您的需求进行自定义。

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                customize: function ( win ) {
                    $(win.document.body)
                        .css( 'font-size', '10pt' )
                        .prepend(
                            '<div>xxxxxxxxxxxxxxxxxxxxxxxx</div><img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                        );

                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' );
                }
            }
        ]
    } );
} );

Answer 2

<script>
    $(document).ready(function () {
        $('.dataTables-example').DataTable({
            pageLength: 10,
            responsive: true,
            dom: '<"html5buttons"B>lTfgitp',
            buttons: [
                { extend: 'copy' },
                { extend: 'csv' },
                { extend: 'excel', title: 'MonthlyReport' },
                { extend: 'pdf', title: 'MonthlyReport' },

                {
                    extend: 'print',
                    customize: function (win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '14px');

                        $(win.document.body).find('table')
                                .addClass('compact')
                                .css('font-size', '14px')
                                .css('color','black') ;
                    }
                }
            ]

        });

    });

</script>

DataTable jQuery打印自定义元素

2 个答案: