datatables печатают не правильно отображающие элементы списка

Question

У меня есть таблица с ячейками, которые содержат элементы списка, проблема в том, что, когда я печатаю таблицу, я теряю элементы списка, и текст становится очень трудно читать.см. изображения.

вот мои js для создания таблицы данных, вы можете просто сосредоточиться на части кнопок.

    $(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' );
        }

    });
}

Answer 1

Оказывается, что все, что нужно было сделать, это отключить scriptHtml в опциях экспорта.Разобрался после того, как посмотрел, как работает скрипт

Теперь моя кнопка экспорта JS выглядит следующим образом:

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

Answer 2

Поскольку код Datatable, по-видимому, удаляет HTML-код при печати, решение состоит в том, чтобы удалить ваши HTML-теги (т.е. <li>) с помощью [li] и [/ li]

Тогда:

1. вы берете https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.js и создаете свой собственный файл print.js

2. вместо отображения <li> и </li>, вы отображаете [li] и [/ li] ... вот так Datatable не удалит этот

3. в вашем коде print.js, вы меняете строку str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';

по

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

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

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

наконец-то вам нужно добавить пользовательский рендерер в ваши ячейки для замены [li] и [/ li] на <li> и </li>

И все готово!; -)

И счастливого нового года (около 2 часов утра во Франции ;-)) !!