Chrome中的HTML表格分页符打印答案

【问题标题】：HTML Table page break print in ChromeChrome中的HTML表格分页符打印
【发布时间】：2016-02-05 18:20:19
【问题描述】：

这个问题让我睡不着，有没有办法动态打破表格，并在下一页显示标题？

事实上，它是一份报告，我不知道它将在屏幕上显示的行数，我正在使用 AngularJS 获取信息并显示在屏幕上。

这是我的页面：

打印时：

这是我的 HTML 页面

<!DOCTYPE html>
<html>
<head>
    <!-- #INCLUDE VIRTUAL="/wvdf_bib/BIB/Includes/bHtmlHead.inc"-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                <div class="col-xs-4">
                    <br />
                    <img class="col-xs-12" src="http://www.cargoweber.com/logos/profile/mepl-international-llc-logo-dubai-dub-916.png" />
                </div>
                <div class="col-xs-8">
                    <h3>Demo Company</h3>
                    <p>
                        John Smith<br />
                        demo@demo1.com<br />
                        http://www.demo1.com<br />
                        Phone: Tel: +1-908-301-6025
                    </p>
                </div>
            </div>

            <div class="col-xs-4">
                <h1>Rate quote</h1>
                <h5>Created on 17 Jun 2015</h5>
                <p>Document Number #LCL FCLJS150617003-1</p>
                <small>As of date <strong>17 Jun 2015</strong></small><br />
                <small>Valid until <strong>17 Jul 2015</strong></small>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="col-xs-6">To</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="col-xs-5">
                                    <br />
                                    <img class="col-xs-12" src="http://www.cocacola.pt/19201201/jopt/post_images/standard/detail_lbITzYnZakM0pchLQsx9frA8wmHFdO.png" />
                                </div>
                                <div class="col-xs-7">
                                    <h3>Coca Cola</h3>
                                    <p>
                                        http://www.cocacola.com
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row>
            <div class="col-xs-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <td colspan="7"></td>
                            <td colspan="3">Total Ocean Freight Sum Up</td>                             
                        </tr>
                        <tr>
                            <th>POL</th>
                            <th>Carrier</th>
                            <th>POD</th>
                            <th>VIA Port</th>
                            <th>Effective date</th>
                            <th>Expiry date</th>
                            <th>Transit time</th>
                            <th>Container20</th>
                            <th>Container40</th>
                            <th>Container40HC</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CNYTN Port of Yantian</td>
                            <td>NYK Line</td>
                            <td>USLAX Los Angeles</td>
                            <td></td>
                            <td>5/17/15</td>
                            <td>5/17/16</td>
                            <td>20 days</td>
                            <td>USD 1,235.00</td>
                            <td>USD 1,627.00</td>
                            <td>USD 1,627.00</td>
                        </tr>
                        <tr>
                            Another x rows
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

问题是：我需要在新页面上再次打印该广告，但我无法让它工作 =(

有谁知道我该如何解决这个问题？

【问题讨论】：

您的问题是关于浏览器中的演示还是关于在打印机上打印 HTML 输出？
打印 HTML 输出。

标签： javascript html css

【解决方案1】：

这张桌子是干什么用的？印刷？如果是这样，您可以使用 JavaScript 从现有的表格元素创建一个新表格。您可以使用 JS 拆分关闭并在 X 行后创建一个新表。最终结果将是您的原始表，转换为多个表，每个表包含 X 行。这将使您能够在每页上使用相同的标题打印它。

这是我使用的...您可以根据需要对其进行修改。基本上，只需执行一些...的范围内的事情。

<table id="myTable">
stuff
</table>
<div id="myNewTable"></div>

<script>
var myNewTable = separateTables('myTable','20');
document.getElementById("myNewTable").innerHTML = myNewTable;

    function separateTables(table,rowLimit) {
        /* Initialize variables */
        var $table = $("#"+table);
        var $headerCells = $table.find("thead th");
        var $footerCells = $table.find("tfoot tr");
        var $rows = $table.find("tbody tr");
        var pageBreak = '<div style="page-break-before:always">&nbsp;</div>';        
        var headers = [], footers = [], rows = [];

        /* Add all header cells to headers array */ 
        $headerCells.each(function() {
            headers.push(this.outerHTML);
        });

        /* Add all rows in tbody to rows array */
        $rows.each(function(){
            rows.push(this.outerHTML);
        });

        /* Create table opening structure */
        var el = document.getElementById(table);
        var attr = [];
        var vals = [];
        for (var i=0, attrs=el.attributes, l=attrs.length; i<l; i++)
        {
            attr.push(attrs.item(i).nodeName);
            vals.push(attrs.item(i).nodeValue);
        }
        var table = '<table ';
        for(x=0;x<attr.length;x++)
        {
            //Ignore cellpadding & cellspacing - set both to zero to prevent issues
            if(attr[x].toString().toLowerCase() == 'cellspacing' || attr[x].toString().toLowerCase() == 'cellpadding')
            {
                vals[x] = "0";
            }
            table += attr[x]+'="'+vals[x]+'" ';
        }
        table += '>';

        /* Create header structure */
        var header = '<thead><tr>';
        for(x=0;x<headers.length;x++)
        {
            header += headers[x];
        }
        header += '</tr></thead>';

        /* Create footer structure */
        $footerCells.each(function(){
            footers.push(this.outerHTML);
        });
        var footer = '<tfoot>';
        for(x=0;x<footers.length;x++)
        {
            footer += footers[x];
        }
        footer += '</tfoot>';

        /* Create our tables */
        var newOutput = table + header + '<tbody>';

        /* Loop over rows and create new table after count hits rowLimit */
        var iCount = 0;
        for (x=0;x<rows.length;x++)
        {
            iCount += 1;
            newOutput += rows[x];
            if(iCount == rowLimit)
            {
                newOutput += '</tbody></table>'+pageBreak+table+header+'<tbody>';
                iCount = 0;
            }
        }
        /* Close remaining table structure and return value */
        newOutput += '</tbody>'+footer+'</table>';
        return newOutput;       
    }
</script>

【讨论】：

从第一页到第二页，完美无缺！但是从第二个到其他表之间存在差距，有没有办法解决这个问题？ SCREENSHOT
我认为正在发生的事情是第 1 页的行溢出到第 2 页，并且您获得了带有 page-break-before:always css 的
，它为页面添加了一个中断。我会尝试在您的通话中减少 rowLimit。用 15 代替 20，看看会发生什么。除此之外，我会看看你有什么 CSS 可能导致问题
我已经根据你的脚本做了一个脚本，谢谢！解决了我的问题:)
@MatheusMarques 非常欢迎，很高兴你知道了 :)

【解决方案2】：

您应该在<thead>. thead reference 中使用<th> 而不是<td>

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="col-xs-6">To</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

在你的css中你可以添加

@media print {
   thead {display: table-header-group;}
}

【讨论】：

哦！我的坏...谢谢你的建议。但是您知道用于重复标题的正确 CSS 是什么吗？
更新了答案以包含用于打印的 css，但这也是 chrome 中先前已知的错误（我不确定当前状态）。可能想试试火狐。