数据表打印未正确显示列表元素

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。看了how the script works后想通了

现在我的导出按钮 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 代码，因此解决方案是通过 [li] 和 [/li] 删除您的 html 标签（即<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+'>';

4. 你最终必须在你的单元格中添加一个自定义渲染器，以将 [li] 和 [/li] 替换为 <li> 和 </li>

它已经完成了！ ;-)

新年快乐（法国时间接近凌晨 2 点 ;-)）！！