Bdtjtk

I have a table with cells that contain list elements, the problem is that when I print the table I lose the list elements and the text becomes very hard to read. see the images.

here is my js to create a datatable, you can just focus on the buttons part.

    $(document).ajaxSuccess(function() {

    qxGenerateDataTables();



});



function qxGenerateDataTables() {

    $("table.dataTable:not(table.dataTableProcessed)").each(function() {

        var $this = $(this);

        var paganation = !$this.hasClass("no-pagination");

        var title = $this.attr ("data-file-name");

        var excel= !$this.hasClass("no-excel");

        var table = $this.DataTable({

            "bPaginate": paganation,

            "bSort": true,

            stateSave: true,

            ordering : true,

            searching: true,

            fixedHeader: true,

            columnDefs : [ {

                orderable : false,

                targets : "no-sort"

            } ]

        ,

        dom:'B<"wrapper"iftlp>',

        buttons: [

            {

                extend:    'excelHtml5',

                text:      '<i style="font-size:24px;color:#337ab7" class="fa fa-file-excel-o fa-2x"></i>',

                titleAttr: 'Excel',

                title:  title,

                customize: function( xlsx ) {

                    var sheet = xlsx.xl.worksheets['sheet1.xml'];

                    $('row:first c', sheet).attr( 's', '55' );



                }

            }, 

            {

                extend: 'print',

                text: '<i style="font-size:24px;color:#337ab7" class="fa fa fa-print fa-2x"></i>'

            }

        ]



        });

        table.buttons().container().appendTo( '#qxDatatable_wrapper .col-sm-6:eq(0)' );



        //Surround the table with an outer div, to have the horizontal scroll working properly.

        var wrapperDiv = $("<div>", {style:"overflow:auto; width: 100%;"});

        $this.before(wrapperDiv);

        wrapperDiv.append($this);

        //Mark this table as processed.

        $this.addClass('dataTableProcessed');

        //Just hide the button for now until we find a better way.

        if (!excel){

            $('.fa-file-excel-o').css( 'display', 'none' );

        }



        //Hide the table info if pagination is disabled...

        if (!paganation){

            $('.dataTables_info').css( 'display', 'none' );

        }



    });

}

As Datatable code seems to remove the HTML code when printing, the solution is to remove your html tags (ie <li>) by [li] and [/li]

Then :

1. you take https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.js and create your own print.js file




2. instead of displaying <li> and </li>, you display [li] and [/li] ...like this Datatable won't remove this




3. in your print.js code you change the line str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';

by

dataOut = dataOut.replace("[li]","<li>");

dataOut = dataOut.replace("[/li]","</li>");

str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';

4. you have finally to add a custom renderer in your cells for replacing [li] and [/li] by <li> and </li>
   

And it's done ! ;-)

And happy new year (near to 2h AM in France ;-) ) !!

Turns out that all that was needed to be done is to turn off the scriptHtml in the export options. Figured it out after looking at how the script works

Now my export button JS looks like this:

    {

     extend: 'print',

     text: '<i style="font-size:24px;color:#337ab7" class="fa fa fa-print fa-2x"></i>',

     exportOptions: 

      {

            stripHtml: false

      }

    }