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

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

寻找一个东西，在那里我可以添加我的动态html代码，将在打印预览呈现

下面是我的Datatable的init方法

 $('#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">

试试这个

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

 {
       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;

                                    }
}

{
扩展：“打印”，
标题：“”，
自定义：功能（win）{
$（win.document.body）
.css（'font-size'，'10pt'）
.预编(
'');
$（win.document.body）.find（'表'）
.addClass（'compact'）
.css（'font-size'，'inherit'）；
var innerHtmlData=”
 {
       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;

                                    }
}