Tạo đầu trang và chân trang của trang bằng cách sử dụng CSS để in

Tôi đang tạo tệp PDF bằng Flying Saucer (xuất ra CSS/HTML sang iText sang PDF) và tôi đang cố sử dụng CSS3 để áp dụng đầu trang và chân trang cho mỗi trang.Tạo đầu trang và chân trang của trang bằng cách sử dụng CSS để in

tôi về cơ bản muốn đưa div này ở phía trên bên trái của mỗi trang:

<div id="pageHeader"> 
    <img src="..." width="250" height="25"/> 
</div>

CSS của tôi trông hơi như thế này:

@page { 
    size: 8.5in 11in; 
    margin: 0.5in; 

    @top-left { 
     content: "Hello"; 
    } 
}

Có cách nào để tôi đặt div này trong content?

Nguồn

2012-03-15 Naftuli Kay

Đưa một yếu tố để phía trên cùng của mỗi trang:

@page { 
    @top-center { 
    content: element(pageHeader); 
    } 
} 
#pageHeader{ 
    position: running(pageHeader); 
}

Xem http://www.w3.org/TR/css3-gcpm/#running-elements (công trình trong Flying Saucer)

Nguồn

2012-03-16 18:02:06 Adam

Wow, tôi muốn biết điều này sớm hơn, tôi đã chiến đấu với 'background-image' để làm điều đó theo cách hoàn thiện hơn. Cám ơn rất nhiều! –

Tôi đang cố gắng áp dụng điều này nhưng vì một số lý do trong Chrome, tiêu đề chỉ được in trên trang đầu tiên và chân trang ở trang cuối cùng. Trong Firefox, điều này hoàn toàn bị hỏng. –

Tính năng này có hoạt động trong Firefox hoặc Chrome không? Tôi đã thử nó cả hai, nhưng nó không làm việc cho tôi:/ – Jaro

Để đưa cả header và footer trên trang (xây dựng trên câu trả lời tuyệt vời từ @ Adam):

<style> 
@page { 

    margin: 100px 25px; 
    size: letter portrait; 

    @top-left { 
     content: element(pageHeader); 
    } 

    @bottom-left { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
} 

</style> 
<body> 
    <header id="pageHeader">something from above</header> 
    <footer id="pageFooter">lurking below</footer> 

    <div>meaningful rambling...</div> 
</body>

LƯU Ý: Để chân trang lặp lại trên mọi trang có thể cần thiết để xác định nó TRƯỚC KHI nội dung khác của nội dung (đối với nội dung nhiều trang)

Nguồn

2017-11-29 22:08:39 zeffren

Tạo đầu trang và chân trang của trang bằng cách sử dụng CSS để in

Trả lời

Các vấn đề liên quan