簡體   English   中英

在打印CSS上的每個頁面周圍畫一個邊框?

[英]Draw a border around each page on print CSS?

我需要在打印時在每個頁面周圍繪制邊框。 我最初使用像破壞的div這樣做:

@media print {
.contentContainer {
position: inline;
height: 98%;
width: 100%;
top: 0px;
left: 0px;
bottom:0px;
right:0px;
border:2px solid;
page-break-after:always;
}  

這樣做有效,但用戶內容已經更改,因此不再可能在運行時之前確定哪些內容將放在單個頁面上以及需要溢出的內容。 因此,此方法不再有效(如果.contentContainer溢出,邊框將跨越兩頁)。

我需要一種方法,它只能在打印時在每個頁面周圍繪制邊框,理想情況下只需通過CSS。 這只是內部的,所以如果它只適用於Chrome,那很好,但IE 11的支持會很好。 其他任何東西都不是我的選擇。

請注意,我已經看到了類似的問題,但它對我不起作用,因為我不能保證只有在分頁后才能進行分頁。

編輯:我看到下面鏈接的問題。 該解決方案對我不起作用,因為我無法控制分頁,也不知道會有多少頁。

我建議您限制頁面中的內容,然后,您可以使用分頁類創建一個簡單的DIV元素。

<!-- content block -->
<div class="page-break"></div>
<!-- content block -->

CSS:

    @media print{
    .page-break { 
        height:2px; 
        border-top:1px solid #999; 
        margin-bottom:13px;
        page-break-after: always;  
    }
}

此外,您可以在每個h1元素之前或部分之后插入分頁符:

 h1 {page-break-before: always;}
 section {page-break-after: always; border-bottom:1px solid #999;}

我希望這能幫到您!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM