Prevent to print white empty sheets while printing pdf of a webpage

Question

I used @media query to override css properties of my webpage and create a good-for-me print layout.

But I have a problem: even if what I want to print "stays" entirely inside a single A4 sheet, if I click "print" (no matter if print pdf or normal paper print) it's printed also a white and empty additional sheet.

How to prevent this?

My code:

@media print {
           
      .noPrint{
        display: none;
      }

      section{         
        display:block;   
        background-color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin:0;
        padding: 1em;  

        /*settings */    
        color-adjust: exact !important;  
        -webkit-print-color-adjust: exact !important;
      }

      a{
        display:none;
      }
      button{
        display:none;
      }
      h1{
        font-size: 3vw;
      }
 }

score 0 · Answer 1 · answered Sep 17 '20 at 10:17

0

You could use :

page-break-after: auto;

or :

@media print {
    html, body {
        height: 99%;    
    }
}

as mentioned in how to avoid extra blank page at end while printing?

But since I haven't worked with print all that much I can't help anymore than this.

answered Sep 17 '20 at 10:17

M.Amin

322
5
18

@margotdb Did you look at the link as well there was an example there that might help you. – M.Amin Sep 17 '20 at 10:34
I've just tried all the solutions at the link, nothing is working for me – margot_eddie Sep 17 '20 at 10:57
Problem solved: I overrided :host inside @media print (my lit-element class extended another class) – margot_eddie Sep 17 '20 at 12:26
1

@margotdb nice. Have fun coding. – M.Amin Sep 17 '20 at 12:42

Prevent to print white empty sheets while printing pdf of a webpage

1 Answers1