Menu
Hello I have used CSS3 page media module to print html content to PDF directly from browser but I am not getting any browser to work it on. My working is below.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@media print {
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "sans-serif";
position: relative;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
@page {
size: letter;
margin: 20mm 25mm;
}
@page {
@top-center {
content: element(pageHeader);
}
}
@page {
@bottom-center {
content: element(pageFooter);
}
}
#pageHeader {
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
}
</style>
</head>
<body>
<div id="pageHeader">
<p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
<p>This is the footer shown on last page.</p>
</div>
<section class="page">
<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>
<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>
</section>
</body>
</html>
It does not work in any browser for me. I have tested it in latest Chrome, FF, Opera, Safari. It should show the header and footer on every page. The header is intended to be shown on top of every page and footer at the bottom of every page. Can any one have working example of CSS3 page media module elements that actually works. Also I am not looking for position absolute or fixed solution of header and footer. I have tried it and it does not work except for single page. I have shorten my text content for this question but it can be copy and past to produce multiple page document to see multiple pages without header and footer. The header and footer div stays at top.
835
It's not currently supported in any of the end-user browsers, but it is supported in PrinceXML, a dedicated engine for generating PDFs. See the CSS3 support for Margin boxes.
PrinceXML is a commercial product, but I use it for creating the print version of novels from a HTML source. It supports a comprehensive list of printing-related features. (I am not affiliated with them in any way.)
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
