如何应用CSS分页符来打印具有很多行的表?


Answers:


134

您可以使用以下内容:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

有关详细信息,请参考W3C的CSS打印配置文件规范。

还可以参考Salesforce开发人员论坛


8
如果您在使用诸如bootstrap之类的框架进行尝试,请注意,使用.spanX之类的东西(使用float样式)会破坏page-break- *属性,这让我浪费了很多时间。
jaredsmith 2014年

1
这可以与UIWebView一起使用,所以我认为现在它也可以与Safari一起使用
JonEasy 2015年

David感谢您分享与Safari或charome一起使用的解决方案。JonEasy您可以使用David的解决方案,以防该解决方案不适用于Safari。@Maxence很高兴它有所帮助。抱歉,我几个月没有活动,所以无法及早回复。
Hemant Metalia

2
该解决方案不会在单元边界之间干净地破坏多行单元,而是在中间将它们破碎。不过,我找到了一个解决方案,该解决方案可以在所有当前的浏览器(Safari,FF和Chrome)中使用:stackoverflow.com/a/47498775/43615
Thomas Tempelmann

1
@如果此答案是几年前提供的,则可能不符合较新版本的浏览器。但您可能会从中得到一些提示。
Hemant Metalia

23

无论您要在哪里暂停,无论是tabletr,都需要为ex给出一个类。page-break使用CSS,如下所述:

/* class works for table row */
table tr.page-break{
  page-break-after:always
} 

<tr class="page-break">

/* class works for table */
table.page-break{
  page-break-after:always
}

<table class="page-break">

它会按照您的要求工作

或者,您也可以具有div相同的结构:

CSS:

@media all {
 .page-break  { display: none; }
}

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

分区:

<div class="page-break"></div>

17
仅当您提前确切知道页面上可以容纳多少行时,这才有效(因为您必须直接在标记中声明分页符)。如果表行中的数据可能会换行到第二行,则这可能很困难(或不可能)。以及多页大小(A4,美国信件,美国法律)如何处理?
aapierce 2014年

使用多行单元格和多列时,此解决方案对我不起作用。不过,我找到了解决方案:stackoverflow.com/a/47498775/43615-它也处理@aapierce提及的问题。
Thomas Tempelmann

1
tr在Chrome v64中都无法正常工作。
Kai Noack

15

我到处寻找解决方法。我有一个jquery移动网站,该网站具有最终的打印页面,并且包含数十个页面。我尝试了上面的所有修复程序,但我唯一能做的就是:

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>

如果该html放在两个TR标记(CHROME)之间,则这是表中的工作。如果该html放在两个TR标签(FIREFOX)之间,则无法在表中使用。在FileFox工作中,CSS Rule->表tr:nth-​​child(10){page-break-after:always; page-break-inside:避免;}
andrejs82

8

不幸的是,以上示例在Chrome中不适用于我。

我提出了以下解决方案,您可以在其中指定每页PX的最大高度。当行等于该高度时,这会将表格拆分为多个单独的表格。

$(document).ready(function(){

    var MaxHeight = 200;
    var RunningHeight = 0;
    var PageNo = 1;

    $('table.splitForPrint>tbody>tr').each(function () {

        if (RunningHeight + $(this).height() > MaxHeight) {
            RunningHeight = 0;
            PageNo += 1;
        }

        RunningHeight += $(this).height();

        $(this).attr("data-page-no", PageNo);

    });

    for(i = 1; i <= PageNo; i++){

        $('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");

        var rows = $('table tr[data-page-no="' + i + '"]');

        $('#Table' + i).find("tbody").append(rows);
    }
    $('table.splitForPrint').remove();

});

您还需要样式表中的以下内容

    div.tablePage {
        page-break-inside:avoid; page-break-after:always;            
    }

当表有一个大行时,不执行任何操作。
克里斯,

1

这为我工作:

<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

从这个线程:避免在表的行内分页


这在一定程度上起作用。表示其停止切割数据在底部的行中。行其仍在切割。但至少比实际问题要好
aviboy2006 '19

0

如果您知道一个页面上需要多少个,则可以随时执行此操作。每隔20个项目将开始一个新页面。

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}

那对我不起作用:(我正在使用CHOME 83.0.4103.116
andrejs82

0

最终,我意识到我的大量内容溢出了表并且没有适当地破坏,甚至根本不需要放在表中。

尽管这不是一个技术解决方案,但它解决了我的问题,当我不再需要桌子时,只需结束桌子即可。然后为页脚开始一个新的页脚。

希望它可以帮助某人...祝你好运!


-1

这是一个例子:

通过css:

<style>
  .my-table {
    page-break-before: always;
    page-break-after: always;
  }
  .my-table tr {
    page-break-inside: avoid;
  }
</style>

或直接在元素上:

<table style="page-break-before: always; page-break-after: always;">
  <tr style="page-break-inside: avoid;">
    ..
  </tr>
</table>

这成功地将4页用于有效地为2页的表格,并且似乎与Safari(6)和Chrome(24)中没有CSS的效果相同。
大卫,

-2

你应该用

<tbody> 
  <tr>
  first page content here 
  </tr>
  <tr>
  ..
  </tr>
</tbody>
<tbody>
  next page content...
</tbody>

和CSS:

tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }

1
除非将内容自然地应打印在单独的页面上(例如,财务信息每年打印一页),否则手动将表格划分为页面不是一个很好的解决方案。您事先不知道一个页面上可以容纳多少内容打印页面。
JJJ
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.