How to create a custom Print Preview screen using Datatables.Net in Angular

Question

I am using Datatables.Net in angular. Everything works fine. I am able to add the Print Button and preview the contents of the table. But I want to customize it and add more details just above my table so that in Preview I can see the data I want to add and I am doing this so that I can print the contents or save it as a .pdf.

Looking for an something where in I can add my dynamic html code which will render on Print Preview

Below is my init method of 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%" }

            ]
        });

css references on index.html


<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">

script reference in my 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",

77792 · Accepted Answer · 2019-09-23 14:11:56Z

1

Try this DataTables

Add the below code under your print title in your script

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

                                    }
}

You can customize the preview and add it to the activeElement's innerHtml

answered Sep 23, 2019 at 14:11

77792

18112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create a custom Print Preview screen using Datatables.Net in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related