I have a number of issues with printing an html page. I spent some time and tried different solutions but none works.
http://jsfiddle.net/kasheftin/vj7hr1cg/1/ - here's the table that I want to print. I simplified it as much as possible. It does not fit in one page and the goal is to avoid page break inside the row content.
Also I want to have some custom text at the bottom of each printed page like 'page 1 of 10'.
Here's the current result:
As we see, the last cell does not fit in a page, it does not have the bottom border, the page number printed as 1/5 instead of '1 of 5' that's specified in css.
Here's what I tried so far:
Each row with rowspan has -primary class name. Page breaks avoided anywhere but before such rows:
.b-rtable__row, .b-rtable__cell {
page-break-inside: avoid !important;
}
.b-rtable__row {
page-break-before: avoid !important;
page-break-after: avoid !important;
}
.b-rtable__row.-primary {
page-break-before: auto !important;
}
Wrapped each cell content into .b-rtable__container div that occupies all cell and has page-break-inside avoid:
.b-rtable__row {
height: 1px; // Fix for 100% height;
}
.b-rtable__cell {
height: inherit;
}
.b-rtable__container {
width: 100%;
height: 100%;
page-break-inside: avoid !important;
position: relative; // tried with and without that rule;
display: table; // tried with and without that rule;
}
Added these rules to draw custom page 1 of 10 text at the bottom of every page, but it's not shown:
#page {
size: auto;
#bottom-center {
content: "page " counter(page) " of " counter(pages);
}
}
I have to print the webpage with customized header in every page,
Below is my CSS code for print media
#media screen {
header.onlyprint, footer.onlyprint,.watermark{
display: none; /* Hide from screen */
}
}
#page {
size:A4;
}
#media print {
#page {
size:auto;
margin-top:2mm;
}
html{
margin-top: 20mm;
}
header.onlyprint {
position: fixed; /* Display only on print page (each) */
top: 0; /* Because it's header */
margin-top: 0;
}
}
And HTML code is:
<header class="onlyprint">
<img src="images/logo.png"/>
</header>
But the problem is only in first page the logo is printing properly and from second page the logo is getting overlapped with body content.the CSS of HTML is not working from second page.
It seems this task cannot be properly implemented with CSS only.
I found a workaround for IE and Firefox using tables here: http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/
Quick summary of that link's content: IE and Firefox will repeat the <thead> Element on every printed page, whereas the <tbody> will be printed continuously without repetition.
Not referring to the URL at top of page.
When an <a> tag is printed in Chrome, it shows the URL after it.
Instead of just showing the anchor text (like this: StackOverflow)
It shows the anchor text w/ URL after it
(like this: StackOverflow (window.open('www.stackoverflow.com'))
This makes the printed page stretch off the printable area, and I'm trying to avoid this from happening. Can this setting be disabled somehow in printing mode or is there a #media print style that can be defined to remove this URL part from print screen?
Tell it not to print anything after the anchor tag.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
Simply use this,
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:
#page {
margin: 10%;
#top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
I've tried to put this page rule inside
#media all {
*CSS code*
}
And outside of it, tried to put it in #media print, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code. Could somebody show me an example of implementing this #page rule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.
As #page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using #page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
This trick worked for me fine. Hope it will help you.
Try to use https://www.pagedjs.org/. It polyfills page counter, header-/footer-functionality for all major browsers.
#page {
#bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
It's so much more comfortable compared to alternatives like PrinceXML, Antennahouse, WeasyPrince, PDFReactor, etc ...
And it is totally free! No pricing or whatever. It really saved my life!
This javascript will add absolute positioned div's with pagenumbers on the right bottom corner and works in all browsers.
A4 height = 297mm = 1123px(96dpi)
<html>
<head>
<style type="text/css">
#page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = addPageNumbers;
function addPageNumbers() {
var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
for (var i = 1; i <= totalPages; i++) {
var pageNumberDiv = document.createElement("div");
var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
pageNumberDiv.style.position = "absolute";
pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
pageNumberDiv.style.height = "16px";
pageNumberDiv.appendChild(pageNumber);
document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
}
}
</script>
<div id="content">
Lorem ipsum....
</div>
</body>
</html>
Can you try this, you can use content: counter(page);
#page {
#bottom-left {
content: counter(page) "/" counter(pages);
}
}
Ref: http://www.w3.org/TR/CSS21/generate.html#counters
http://www.princexml.com/doc/9.0/page-numbers/
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.
This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the #page and most the CSS3 specifications work for Chrome.
Solution 1 (easy) if you are OK with cutting your view into pages, ready to print
Just add their CDN in the head tag of your page :
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
You can then add page numbers by using the automated counter page. Example :
HTML to put anywhere you want to display the current page number:
<div class="page-number"></div>
CSS to make the number appear in the div :
.page-number{
content: counter(page)
}
The library also allows to easily manage page margins, footers, headers, etc.
Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing
In this case, you need to apply the Paged.js CDN only when printing the document.
One way I can think of would be to add a print me button that fires Javascript to :
add the CDN to the page
and then execute window.print(); to launch the printing prompt of the navigator
I don't know if someone still out there needs the answer, try this, it might work for you
in your html file put a div element your html like this
<div class="page-number"></div>
and do your css like this
.page-number:before {
content: "Page: " counter(page);}
hope it works for you
I know this is not a coding answer but it is what the OP wanted and what I have spent half the day trying to achieve - print from a web page with page numbers.
Print to pdf without the numbers
Run it through ilovepdf here https://www.ilovepdf.com/add_pdf_page_number which adds the page numbers
Yes, it is two steps instead of one but I haven't been able to find any CSS option despite several hours of searching. Real shame all the browsers removed the functionality that used to allow it.
This is what you want:
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I use page numbers styled in CSS to generated PDF documents, and it works:
#page {
size: A4 portrait;
margin-top: 1.2cm;
margin-bottom: 1.2cm;
margin-left: 1.2cm;
margin-right: 1.2cm;
background-image: url('../../images/logo_small.png');
background-repeat: no-repeat;
background-position: 40px 10px;
#bottom-center {
content: counter(page);
}
}
**#page {
margin-top:21% !important;
#top-left{
content: element(header);
}
#bottom-left {
content: element(footer
}
div.header {
position: running(header);
}
div.footer {
position: running(footer);
border-bottom: 2px solid black;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
<div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
<span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
</div >**
I have the following CSS:
#media print {
div.question-list-footer
{
position: fixed;
bottom: 0;
padding-left: 180px;
}
div.question-list-footer-center
{
text-align: center;
}
#page { counter-reset: page 1}
}
#pageNumber:after { content: counter(page); }
#pageNumber { counter-increment: page; }
and the following html on my page:
<div class="question-list-footer">
<div class="question-list-footer-center">
<span>Page Number: <span id="pageNumber"></span></span><br/>
Date: #firstItem.Date.Value.ToShortDateString()
Id: #firstItem.Id
</div>
</div>
and this works when printing except that all pages have "Page Number 1". (IE9, Chrome & FF) I have been staring at this and playing with it for ages and still can't see why. Does anyone have a fix? - Please tell me it's not obvious. (FWIW - Chrome doesn't like my bottom).
I think this line:
#page { counter-reset: page 1}
Means:
“On each printed page, reset the page counter to 1.”
See http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset
Hence every page would have page number 1, as you’re resetting it to 1 on each page.
Does it work if you do body { counter-reset: page 1} instead? (Like in the example from the spec.)
EDIT
I think if you just remove this, the counter won't be reset so it will just increment like you want
#page { counter-reset: page 1}