![](/img/trans.png)
[英]Workaround to use css page-break properties in chrome for printing?
[英]Page break workaround (javascript) for chrome
因此,眾所周知,這很棒的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>
注意兩點: 線程上的類“ repeat”(重復)和20行之后帶有break-page類的空tr 。
因此,請檢查以下CSS:
@media print {
.break-page {
display: block; page-break-before: always;
}
}
並檢查此JS:
var repeat = $('.repeat tr');
$('.break-page').after(repeat.clone());
太棒了:)這正是我想要的。 檢查第一頁的方式:
在第二頁上,您可以看到標題重復,但是請檢查以下巨大空白:
就是這樣了。 你們可以幫我擺脫那巨大的空白嗎? 此外,如果有人遇到與我相同的麻煩,我也希望這會有所幫助。
謝謝
我所做的就是:用div代替表標簽。 另外,我在chrome的20行之后插入了一個分頁符。 創建了一個JavaScript hack,以再次添加標頭。
注意:這會為每個瀏覽器創建不同的頁面和數據布局。 Chrome瀏覽器有3頁,桌子的最后一頁有點在中間...而firefox只有2頁,非常適合。 那是我所能做的最好的。
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;
}
}
哈克
var is_chrome = window.chrome;
if(is_chrome){
var repeat = $('.divHeading');
$('.break-page').after(repeat.clone());
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.