数据表打印复杂标题打印预览

Question

嗨，我正在使用数据表，它很棒，但我在像这样的复杂标题中遇到了问题

<thead>
    <tr><td>some text</td></tr>
    <tr><td>some text</td></tr>
</thead>

现在显示页面是这样的 当我点击打印预览时，我得到这样的结果

thead 中的第一个 tr 消失了 我打开了 datatable.js 文件，我发现了这个

        var addRow = function ( d, tag ) {
        var str = '<tr>';

        for ( var i=0, ien=d.length ; i<ien ; i++ ) {
            // null and undefined aren't useful in the print output
            var dataOut = d[i] === null || d[i] === undefined ?
                '' :
                d[i];
            var classAttr = columnClasses[i] ?
                'class="'+columnClasses[i]+'"' :
                '';

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

        return str + '</tr>';
    };

    // Construct a table for printing
    var html = '<table class="'+dt.table().node().className+'">';

    html += '<thead>';

    // Adding logo to the page (repeats for every page while print)
    if(config.repeatingHead.logo) {
        var logoPosition = (['left','right','center'].indexOf(config.repeatingHead.logoPosition) > 0) ? config.repeatingHead.logoPosition : 'right';
        html += '<tr><th colspan="'+data.header.length+'" style="padding: 0;margin: 0;text-align: '+logoPosition+';"><img style="'+config.repeatingHead.logoStyle+'" src="'+config.repeatingHead.logo+'"/></th></tr>';
    }

    // Adding title (repeats for every page while print)
    if(config.repeatingHead.title) {
        html += '<tr><th colspan="'+data.header.length+'">'+config.repeatingHead.title+'</th></tr>';
    }

    if ( config.header ) {
        html += addRow( data.header, 'th' );
    }

    html += '</thead>';

    html += '<tbody>';
    for ( var i=0, ien=data.body.length ; i<ien ; i++ ) {
        html += addRow( data.body[i], 'td' );
    }
    html += '</tbody>';

    if ( config.footer && data.footer ) {
        html += '<tfoot>'+ addRow( data.footer, 'th' ) +'</tfoot>';
    }
    html += '</table>';

它只是在头中添加最后一个 tr 但我无法将第一个 tr 与打印预览放在一起 非常感谢

这是一个 jsfiddle ex 当您预览表格时，它在thead 处显示有拖行 但在打印预览中，它仅在广告中的 tr 上显示

enter link description here

Answer 1

正如Datatables website 的this 主题中所述，此功能尚不可用。

Answer 2

您要求解决方法，因为目前已经提到它不是 Datatables 的功能。您可以通过仅获取表格内容将其简单地转换为 PDF。然后在没有任何库的情况下为打印窗口添加样式。它真的只是一个窗口。

这只是在加载窗口之前注入正确样式的问题。所以我们只需要确保我们获取数据表输出的样式并将其注入。

CSS

    table
    {
        width: 300px;
        font-size: 17px;
    }
    table, th, td
    {
        border: solid 1px #DDD;
        border-collapse: collapse;
        padding: 2px 3px;
        text-align: center;
    }        table
    {
        width: 300px;
        font-size: 17px;
    }
    table, th, td
    {
        border: solid 1px #DDD;
        border-collapse: collapse;
        padding: 2px 3px;
        text-align: center;
    }

HTML

<div id="print-window">
    <table id="example" class="display" style="width:100%">
        <thead>
        <tr>
            <th rowspan="2">Name</th>
            <th colspan="2">HR Information</th>
            <th colspan="3">Contact</th>
        </tr>
        <tr>
            <th>Position</th>
            <th>Salary</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>$320,800</td>
            <td>Edinburgh</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>$170,750</td>
            <td>Tokyo</td>
            <td>8422</td>
            <td>g.winters@datatables.net</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>$86,000</td>
            <td>San Francisco</td>
            <td>1562</td>
            <td>a.cox@datatables.net</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>$433,060</td>
            <td>Edinburgh</td>
            <td>6224</td>
            <td>c.kelly@datatables.net</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
        </tfoot>
    </table>
</div>
<input type="button" value="Print" onclick="pdf()" />

Javascript

function pdf() {
    let t = document.getElementById('print-window').innerHTML;

    let style = "<style>";
    style = style + "table {width: 100%; font-size: 17px;}";
    style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
    style = style + "padding: 2px 3px;text-align: center;}";
    style = style + "</style>";
    let win = window.open('', '', 'height=700,width=700');

    win.document.write('<html><head>');
    win.document.write('<title>Profile</title>');
    win.document.write(style);
    win.document.write('</head>');
    win.document.write('<body>');
    win.document.write(t);
    win.document.write('</body></html>');

    win.document.close();
    win.print();
}