chrome的分页解决方法（javascript）答案

【问题标题】：Page break workaround (javascript) for chromechrome的分页解决方法（javascript）
【发布时间】：2023-04-06 18:15:01
【问题描述】：

所以，众所周知，这个很棒的 CSS 属性：

  table { page-break-inside:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }

不适用于 Chrome。所以现在出现了解决方法。我有这个表结构（请注意JSP和EL语法）

    <table class="table resultTable">
        <thead class="repeat">
            <tr class="head">
                <th>XPTO HEADER</th>
                <th>XPTO HEADER</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${items}" var="t" varStatus="loop">
                <tr>                        
                    <td class="money">${t.XPTO}</td>
                    <td class="money">${t.XPTO2}</td>
                </tr>
                <c:if test="${(loop.index + 1) % 20 == 0}">
                    <tr class="break-page">
                    </tr>                   
                </c:if>
            </c:forEach>                                        
        </tbody>
    </table>

需要注意两点：线程上的“重复”类和20行后带有分页类的空tr。

所以，检查一下这个 CSS：

    @media print {          
        .break-page {
             display: block; page-break-before: always;
        }
    }

并检查这个 JS：

     var repeat = $('.repeat tr');

     $('.break-page').after(repeat.clone());

太棒了 :) 这正是我想要的。检查第一页的效果：

第二页，你可以看到标题重复，但是，看看这个巨大的空白：

就是这样。你们能帮我摆脱那个巨大的空白吗？如果有人遇到和我一样的麻烦，我也希望这会有所帮助。

谢谢

【问题讨论】：

我假设您在 Google 的打印预览中看到了这一点。右键单击并检查元素并查看是否确定导致问题的原因。我的猜测是，第二个页表（实际上）正是从您的第一个页表中断的地方开始的。
是的，凯文，我是。虽然我无法在打印预览中检查元素。我从 chrome 得到的只是：<embed id="plugin" type="application/x-google-chrome-pdf" src="chrome://print/85/0/print.pdf" stream-url="chrome://print/85/0/print.pdf" headers=""> PS：我认为你是对的！

标签： javascript css google-chrome printing page-break

【解决方案1】：

我所做的只是：使用 div 而不是 table 标签。我还在 20 行 chrome 后插入了一个分页符。创建了一个 javascript hack 以再次添加标题。

注意：这会为每个浏览器创建不同的页面和数据布局。 Chrome 有 3 页，最后一页表格在中间……而 Firefox 只有两页，非常适合。这是我能做的最好的了。

HTML

            <div class="divTable">
                <div class="divHeading">
                    <div class="divCell">${i18n.label.initialValue}</div>
                    <div class="divCell">${i18n.label.additions}</div>
                    <div class="divCell">${i18n.label.discounts}</div>
                    <div class="divCell">${i18n.label.finalValue}</div>
                </div>
                <c:forEach items="${detailedCashFlow.transactions}" var="t" varStatus="loop">
                        <div class="divCell money">${t.initialValue}</div>
                        <div class="divCell money">${t.totalAddition}</div>
                        <div class="divCell money">${t.totalDiscount}</div>
                        <div class="divCell money">${t.value}</div>
                    </div>

                    //THIS IS VERY IMPORTANT
                    <c:if test="${fn:length(detailedCashFlow.transactions) > (loop.index + 1 ) && (loop.index + 1) % 20 == 0}">
                        <div class="break-page"></div>
                    </c:if>
                </c:forEach>                                        
            </div>

CSS

            .divTable
            {
                display: table;
                width: 100%;
                margin-top: 20px;
            }
            .divTitle
            {
                display: table-caption;
                text-align: center;
                font-weight: bold;
                font-size: larger;
            }
            .divHeading
            {
                display: table-row;
                font-weight: bold;
                text-align: center; 
            }
            .divRow
            {
                display: table-row;
            }
            .divCell
            {
                display: table-cell;
                border: solid;
                border-width: thin;
                padding-left: 5px;
                padding-right: 5px;
                text-align: center;         
                font-size: 12px;
            }
            .divRow:nth-child(even){
                background: #aad4ff !important;
            }
            .divRow:nth-child(odd){
                background: #FFF !important;
            }

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

                .divRow
                {
                    -webkit-column-break-inside: avoid;
                    webkit-page-break-inside:avoid; 
                    page-break-inside:avoid; page-break-after:auto;    
                }

                .break-page {
                    page-break-before: always;
                }
            }

JS 破解

     var is_chrome = window.chrome;

     if(is_chrome){
         var repeat = $('.divHeading');

         $('.break-page').after(repeat.clone());             
     }

【讨论】：