Print format add auto page number

1

Hello,
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

2

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

3

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

4

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.

5

Ok Thankyou @NCP

6

Use some scripts to achieve this in print formats

7

This should work for A4 sized pages

<script>
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.classList.add('page-number');
        pageNumberDiv.textContent = `Page ${i + 1} of ${numberOfPages}`;
        pageNumberDiv.style.top = `${(i * pageHeightPx) + 4}px`;
        printFormatDiv.appendChild(pageNumberDiv);
    }
}
</script>

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.

8

Hello,

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

9

Hii @BHAVESH_MAHAVAR

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"

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

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

Your footer code here...

</div>

Related CSS Example

:root{
    --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.