[How To] HTML Print Format to get Page Break and Page Number plus Footer

Dear ERPNEXT Community,

I have been using ERPNEXT for a few years and have been spending a lot of time on this discussion forum and Google. I know many people are struggling with the customization, and there aren’t always readily available documentation for certain topics. So I would like to contribute to the community as a gratitude for the team and everyone for making this amazing system possible.

In order to get page break and page number on to your print format, please insert the code below into the custom print format for the doctype you want (Sales Order, Sales Invoice, etc):

   <table>
         <thead>
              .......
         </thead>
         <tbody>
    {# Page Number Setting - 1 #}
    	{% set cnt = [0] %}
             {%- for item in doc.items -%}
               {% if not item.page_break %}
                   <tr>
    			<td> {{item.idx}} </td>
    			.....                  
    		        </tr>
                {%- else -%}
    {# Page Number Setting - 2 #}
        {% if cnt.append(cnt.pop() + 1) %}{% endif %} 
  
    {# Page Number Setting - 3 #}
    	{{ "This is page: " }} {{cnt[0]}}

{# Your footer can go here #} 

 {# Page Break #}             
<div class="page-break"></div>

{{ add_header(0,1,doc,letter_head, no_letterhead) }} 
 {# Repeat your header code from above here with invoice number, customer names etc #} 
    <table style="width:100%; position: sticky; border: 1px solid; margin-top: -1px;">
    	<thead>
             ......
    	</thead>
    	<tbody>
                   <tr>
    			<td> {{item.idx}} </td>
                                ....             
    		        </tr>
               {%- endif -%}
             {%- endfor -%}
      </tbody>
    </table>
  {# Page Number Setting - 4 #}
       {% set total_page = cnt[0] + 1 %}
               {{ "This is page: "}} {{ total_page }} / {{ total_page }}

{# Your footer goes here #}

For your footer, depending on its size, it should be a table with following CSS class (Put this in the CSS Column below the print format):

.footer {
             position: fixed; 
	    bottom: 0; 
	    right: 0;
	    width: 100%;
	    border-collapse: collapse;
	    min-height: 30mm; #Enter the height you want
}

I understand that the footer solution is not very elegant but it works. Keep in mind that there are two places that the footer table have to go in, and they both have to be EXACTLY the same, or there will be mismatched printing on the screen.

I hope this helps out anyone who’s having trouble with this.

7 Likes

I like your initiative, keep it up

Thank you for your wonderful contribution, Ratanak.

To make your howto complete, please say how we find the code to modify.

Hello

Good Job

I am assuming this will be in the “Letter Head” ??

Regards

@olamide_shodunke

This goes into the custom HTML print format in Print Format, for your sales order, delivery note, sales invoice, etc

2 Likes

@neerajvkn
I’ve tried using position: static but the footer won’t appear on every page when the document has more than one page.
I dont have a strong background in coding in general and what I’ve learned is through trial and error and the reason why position has to be fixed is actually to make the footer on every page print on top of each other on subsequent pages and that’s why I emphasised in my post that the first footer and the second footer has to be exactly the same. If they’re not the same , you will see the mismatch. You could try it and see. But if there’s a better solution, please suggest.

it was a mistake, thats why i deleted the post, and using static, it also didnt yield expected result in actual print, it only fixes the print preview

can you please share a complete working code for custom print format with header and footer repeating and a screenshot of the pdf generated with this code, it’ll help understand code a bit better.