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

然后：

您使用https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.js并创建自己的print.js文件
而不是显示<li>和</li>，而是显示[li]和[/ li] ...就像此数据表不会删除此
在您的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点；-)）！

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

2 个答案: