How to customize print in browser

Question

How to customize print in browser

Navigation

#1 by (0 votes)

0

I would like to customize the printing of pages in html so that only the number of pages is displayed.

I checked that you can remove the header and footer

@page 
{
    size:  auto;
    margin: 5mm;
}

I just could not leave the page numbers alone.

Is there any way to javascript or jquery to customize this need.

Thank you

javascript html jquery

asked by anonymous 11.07.2018 / 16:25

1 answer

How can I make a switch run in parallel with another switch? Disable a button on a button set (PHP JQuery)

score 0 · Answer 1

Next, my friend, once I needed to do this too, it's good chatinho rsr but it worked.

Maybe this is not the best way to do it but this code helps.

*{
    	margin:0;
    	padding:0;
    }

    .conteudo_page{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:95%;
        padding-bottom: 5%;
      background-color: red;
    }

    .conteudo_page2{
    	position:absolute;
    	top:100%;
    	left:0;
    	width:100%;
    	height:95%;
        padding-bottom: 5%;
      background-color: yellow;
    }

    .page_number{
    	position:absolute;
    	top:95%;
    	left:0;
    	width:100%;
    	height:5%;
      background-color: blue;
      display: none;
    } 

    .page_number2{
    	position:absolute;
    	top:195%;
    	left:0;
    	width:100%;
    	height:5%;
      background-color: blue;
      display: none;
    } 

    .number_page{
      text-align: center;
      vertical-align: middle;
      margin-top: 20px;
    }

    @media print{

        .page_number{
            display: block;
        }
        .page_number2{
            display: block;
        }

        .conteudo_page{
            padding-bottom: 0;
        }

        .conteudo_page2{
            padding-bottom: 0;
        }


    }

<html>
<body>
  <div class="conteudo_page">
        <h1>pagina 1 aqui</h1>
    </div>
    <div class="page_number">
        <p class="number_page">Página 1</p>
    </div>
    
    <div class="conteudo_page2">
        <h1>pagina 2 aqui</h1>
    </div>
    <div class="page_number2">
        <p class="number_page" style="">Página 2</p>
    </div>
</body>
</html>

try to create an html with this code to test.

Basically what I did was create a div that you will put in what you want on page 1.

<div class="conteudo_page">
    <h1>pagina 1 aqui</h1>
</div>

It will occupy 100% of the screen. but in 5% of it has a div that will appear only in the print and with the page number, there you can put whatever you want as a footer:

<div class="page_number">
    <p class="number_page">Página 1</p>
</div>

I put Page 1. and then you follow the same principle for the other pages you want.

obs: have to do their classes as I did in the css part:

and also mandala appear and reduce the padding at the time of printing:

.page_number{
        position:absolute;
        top:95%;
        left:0;
        width:100%;
        height:5%;
      background-color: blue;
      display: none;
 } 

@media print{

    .page_number{
        display: block;
    }

    .conteudo_page{
        padding-bottom: 0;
    }
}

I hope to have helped

ahh remembering that you need to disable the header and footer of your browser