How to Avoid Extra Blank Page At End While Printing

how to avoid extra blank page at end while printing?

You could maybe add

.print:last-child {
page-break-after: auto;
}

so the last print element will not get the extra page break.

Do note that the :last-child selector is not supported in IE8, if you're targetting that wretch of a browser.

Removing blank pages when printing - using visibility: hidden

Use @media Print Like This :

@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}

UPDATE 2:

Use This Code : Instead Of Your Code

@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid !important;
page-break-before: avoid !important;
}
.print-display-none,
.print-display-none * {
display: none !important;
}
.print-visibility-hide,
.print-visibility-hide * {
visibility: hidden !important;
}
.printme,
.printme * {
visibility: visible !important;
}
.printme {
position: absolute;
left: 0;
top: 0;
}

}

How to avoid a blank page while scaling down a page for printing purpose?

I solved my problem by changing transform to zoom.

CSS Print layout is adding an extra page

Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.

Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.

While printing there is an additional blank page

I changed the css to like this

@media print {
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100vh !important;
}
}

what matters here is height: 100vh !important;



Related Topics



Leave a reply



Submit