javascript - 如何在 Angular 中使用 Datatables.Net 创建自定义打印预览屏幕

Question

我在 Angular 中使用 Datatables.Net。一切正常。我能够添加打印按钮并预览表格的内容。但我想自定义它并在我的表格上方添加更多详细信息，以便在预览中我可以看到我想要添加的数据，我这样做是为了打印内容或将其另存为 .pdf。

正在寻找可以添加将在打印预览中呈现的动态 html 代码的内容

下面是我的Datatable初始化方法

 $('#myTable').DataTable({
            data: this.data,
            retrieve: true,
            orderClasses: false,
            responsive: true,
            scrollX: true,
            paging: true,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'Excel',
                },

                {
                    extend: 'print',
                    title: 'Print Table',
                }
            ],

            "columns": [

                { "data": "Col1", className: "text-center", width: "17%" },
                { "data": "Col2", className: "text-center", width: "17%" },
                { "data": "Col3", className: "text-center", width: "20%" },
                { "data": "Col4", className: "text-center", width: "20%" },
                { "data": "Col5", className: "text-center", width: "17%" }

            ]
        });

index.html 上的 css 引用

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

我的 angular-cli 中的脚本引用

"assets/datatable/js/jquery.dataTables.min.js",
"assets/datatable/js/dataTables.buttons.min.js",
"assets/datatable/js/buttons.flash.min.js",
"assets/datatable/js/jszip.min.js",
"assets/datatable/js/pdfmake.min.js",
"assets/datatable/js/vfs_fonts.js",
"assets/datatable/js/buttons.html5.min.js",
"assets/datatable/js/buttons.print.min.js",

Answer 1

试试这个 DataTables

在脚本中的打印标题下添加以下代码

 {
       extend: 'print',
       title: '',
       customize: function (win) {

       $(win.document.body)
      .css('font-size', '10pt')
      .prepend(
      '<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');

       var innerHtmlData = "<div class=" + '"row text-center" style="font-size:22px;font-weight:bold;">Header</div>';
       win.document.activeElement.innerHTML = innerHtmlData;

                                    }
}

可以自定义预览，添加到activeElement的innerHtml