Print format add auto page number

I create one print Format in erpnext using custom Print Format form using html and css add every page in header and footer add now i want to created print forrmat in add number at every page top right cornerc which is auto generate depend on page how can i set

I think, page number is automatically set when view click on “PDF”, not print or full page option.

Ok @NCP but i want to print format in add auto page number how can it is possible?

I’m not sure about the print level; it seems tricky to set up. I think there are many posts in the forum, but there are no solutions for that. search it in the forum and check it with different different case.

Ok Thankyou @NCP

Use some scripts to achieve this in print formats

This should work for A4 sized pages

window.onload = function() {

    const pageHeightPx = 1122.510;
    const headerHeight = document.querySelector('.print-head').getBoundingClientRect().height;
    const footerHeight = document.querySelector('.print-foot').getBoundingClientRect().height;
    const actualPageHeightPx = pageHeightPx - headerHeight - footerHeight - 169;
    const bodyElement = document.querySelector('.print-body');
    const currentBodyHeight = bodyElement.getBoundingClientRect().height;
    const numberOfPages = Math.ceil(currentBodyHeight / actualPageHeightPx);
    const printFormatDiv = document.querySelector('.print-format');
    const contentDiv = document.getElementById('print-content');

    for (let i = 0; i < numberOfPages; i++) {
        const pageNumberDiv = document.createElement('div');
        pageNumberDiv.textContent = `Page ${i + 1} of ${numberOfPages}`; = `${(i * pageHeightPx) + 4}px`;

Things that might cause faulty page numbering;

  • Adding a page break.
  • Displaying theads as table header group (you will need to account for theads’ heights that repeat on every page). To solve this;
if (numberOfPages > 1) {
        const theads = document.querySelectorAll('.print-format table thead');
        let totalTheadHeight = 0;
        theads.forEach(thead => {
            totalTheadHeight += thead.getBoundingClientRect().height;

        const actualBodyHeight = currentBodyHeight + totalTheadHeight * (numberOfPages - 1);
        const tempNumberOfPages = Math.ceil(actualBodyHeight / actualPageHeightPx);

        const newBodyHeight = currentBodyHeight + totalTheadHeight * (tempNumberOfPages - 1);
        const newNumberOfPages = Math.ceil(newBodyHeight / actualPageHeightPx);

Then you can use the newNumberOfPages in your for loop.


Can you please help me with Code Reference for Repeated header footer in Every page of pdf.


Add this CSS

@media print {
    @page {
        margin: 20mm;
        size: A4;
        margin: 6mm;
    body {
        margin: 0;
        padding: 0;
    .letter-head {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    .content {
        margin-top: 100px; /* Adjust according to your header height */
    table {
        page-break-inside: auto;
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    .content {
        margin-top: 140px; /* Adjust this value based on the height of your header */
        padding-top: 20px; /* Add some padding to create space below the header */

and also don’t forgot to add class as per CSS

For Header - class="letter-head"
For Content - class="content"

<table style="min-height: var(--page-height); width: var(--page-width)">
    <thead class="print-head" style="height: var(--header-height);>
    <tbody class="print-body">
    <tfoot class="print-foot" style="display: table-footer-group;">
            <td id="footer-spacer" style="height: var(--footer-height);"></td>

<div id="print-footer" style="height: var(--footer-height); position: fixed; bottom 0;">

Your footer code here...


Related CSS Example

    --page-width: 210mm;
    --page-height: 297mm;
    --header-height: 40.0mm;
    --footer-height: 35.0mm;

Note: for this to work in PDF, you need to render through Chrome Headless instead of wkhtmltopdf.