0
I would like to customize the printing of the pages on html so that only the number of pages is displayed.
I checked that it is possible to remove the header and footer
@page
{
size: auto;
margin: 5mm;
}
but I couldn’t leave only the page numbers.
Is there any way in javascript or jquery to customize this need.
Thank you
0
Next my friend, once I had to do it too, it’s quite boring rsr but it worked.
maybe not the best way to do it but this code helps you.
*{
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 creating an html with this code to test.
basically what I did was create a div that Voce will put in what you want on page 1.
<div class="conteudo_page">
<h1>pagina 1 aqui</h1>
</div>
It will take up 100% of the screen. however 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: you have to do their classes like I did in the css part:
and also mandalas appear and reduce padding at printing time:
.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;
}
}
hope I’ve helped
Remembering that you need to disable the header and footer of your browser
Friend you see what happens to your code when you put 1000 characters in each "page"? It only counts the first two pages, even though the document is more than 10 pages long...
@hugocsl our had not realized this no, I think it will not apply if the pages are too big then. There is how to tidy up?
As far as I had tested earlier there is no way. unless he separates the content into small blocks as I commented there on his question. And the way you did it too would have to count in hand how many pages have what tb is not suitable, have to have an automatic counter for it
is unfortunately solved my problem so at the time, I remember that there is a code that makes the div go to another page if it does not fit on the page, I will post this code in the answer
Even so it will not help because the content will push the number to another page, so if the content is the size of two page the first page is without number and the number 1 will only appear on the other page... but you can try there to see...
makes sense, I’ll see if there’s a way to ignore the pagination records
Browser other questions tagged javascript html jquery
You are not signed in. Login or sign up in order to post.
So you removed the header and the footer and the page numbers went away together is this?
– hugocsl
Exactly that.
– Pedro
Dude if it’s small chapters that only fit one per page you might get a solution, but if it’s a long text run where you can’t break into sessions that fit on a page then it gets complicated. If it’s just one content per page ai is possible using CSS
– hugocsl