Need help on JSReport footer



  • As I am new to JSReport, I am trying to code a report and I am almost done but the footer and page number in footer is not shown in every page. I am using the chrome pdf option. I had been trying it for the past 2 days. But I didn't get it. Please help me to solve this. I hereby share my playground code and attached the footer screenshot that should be displayed in all the pages.
    0_1616765794451_footer.PNG [0_1616765804325_report-files.zip](Uploading 100%)

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Report</title>
      <style>
        table {
            margin-bottom: 20px;
            page-break-inside: auto;
        }
    </style>
    </head>
    <body>
      <div
        style="background: #fff; line-height: 1.5em; color: #000000; font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
    	
    	
    	
    	    <div style="display: flex;margin-top: 30px;">
          <div style="margin: 0 10px 0 0 ;width: 20%; text-align: left;">  
          <div style="float: left;text-align: left;">
    	    <img src="{#asset rnf.png @encoding=dataURI}" style="width:100%; max-width:300px;" />
              
    	  </div>  
          </div>
    	  <div style="margin: 0 10px 0 0 ;width: 55%; text-align: center;"> 
            <div style="clear: both;min-height: 120px; width: 100%;">
    	
          <div
            style="border-radius: 0 0 50px 0; line-height: 20px; height: 55px;  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e4872', endColorstr='#015ea1', GradientType=1 ); float: center;">
     
              <div
                style="color: #fd6b16;   font-size: 26px;  float: center;text-align: center;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
            
                <b>Company Name</b> 
              </div> 
    		 <div
                style="color: #0096d0; font-size: 18px;margin-top:5px;  float: center;text-align: center;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
             
    			<b>TAGLINE</b>
              </div> 
    		  
    		  <div
                style="color: #00000; font-size: 12px;  float: center;text-align: center;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
             
    	<span>1/67-A ,1/67-B, Salem Trichy Main Road,Ayeepalayam, Athanur - 616801.</span>
    <span style="display:block">Rasipuram (Tk.), Namakkal (Dt.) Tamilnadu.</span>
    <span style="display:block">PHONE : (04287) 2599393321 FAX:21313213</span>
    <span style="display:block">E-Mail : admin@xyz.com</span>
              </div> 
    		  
          </div>
         
    
    	
        </div> 
          </div>
          <div style="margin: 0 0 0 10px;width: 25%; text-align: right;">  
          <div style="float: right;text-align: right;">
    	  <div></div>
    			 <div
                style="color: #00000; font-size: 12px;  float: right;text-align: right;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
    			Format No: RN FAL/TR/F-01</div><br/>
    	  <img src="{#asset rnf.png @encoding=dataURI}" style="width:100%; max-width:300px;" />
             </div>
          </div>
        </div>
    	
    	
    	
    	 
        
    	<hr style="color:black;height:2px;background:black">
    	<h2
              style="font-size: 16px;font-weight: 600;margin: 0;color:red;text-align:center;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
              Test Report</h2>
    	 <div style="display: flex;margin-top: 10px;">
    	
          <div style="margin: 0 30px 0 0;width: 50%;">
            <h3
              style="font-size: 14px;font-weight: 600;margin: 0;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
              Issued To</h3>
    		 <span style="display:block;color: #00000; font-size: 12px;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">Production Manager</span>
          
    	  </div>
    	   <div style="text-align:right;width: 50%;">
             <h3
              style="font-size: 14px;font-weight: 600;margin: 0;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
              Report No: <span style="display:inline;color: #00000; font-size: 12px;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">00001</span></h3> 
    		    <h3
              style="font-size: 14px;font-weight: 600;margin: 0;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
              Date:  <span style="color: #00000; font-size: 12px;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">25/04/2021</span></h3>
    		</div>
    	  </div>
    	  
    	  <div style="display: flex;margin-top: 5px;">
    	  <p style=" margin: 0 0 3px 0;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Sample Name:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">Complementary Weaning Food Containing Amylase Activity</span></p>
    	</div>
    	  
    	  
        <div style="display: flex;">
    	
          <div style="margin: 0 30px 0 0;width: 50%;">
    	  
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Sample Condition:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">Satisfactory</span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Sampling Plan:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">NABL/F-41</span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Test Start On:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">01/04/2021</span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Test End On:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">10/04/2021</span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Environmental Condition:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">Ambient temperature</span></p>
           
          </div>
          <div style="margin-left:auto;width: 50%;">
            
           
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Sample Quantity:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">600g
                </span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Sample Received on:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">02/04/2021</span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Batch Number:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #000000; font-size: 13px; font-weight: 600;">2-666</span></p>
            <p style=" margin: 0 0 3px 0; display: flex;">
              <label
                style="font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;color: #666666;font-size: 12px;font-weight: normal;min-width: 86px;">Manufacturing Date:</label>
              <span style=" font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;
        color: #000000; font-size: 13px; font-weight: 600;">08/04/2021</span></p>
            
          </div>
        </div>
        <div style="margin: 10px 0 10px 0;">
          
            <table width="100%" border="0" cellspacing="0" cellpadding="0"
            style="width: 100%; border: 1px solid #6e91aa; border-collapse: collapse;">
            <tbody>
              <tr>
                <th rowspan="2" scope="col"
                  style="border: 1px solid #6e91aa;padding: 4px;width:5%;background: #abbfce;font-size: 12px;font-weight: 700;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  S.No</th>
                <th rowspan="2" align="left" scope="col"
                  style="border: 1px solid #6e91aa;padding: 4px;width:22%;background: #abbfce;font-size: 12px;font-weight: 700;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  Tests</th>
                <th rowspan="2" scope="col"
                  style="border: 1px solid #6e91aa;padding: 4px;width:22%;background: #abbfce;font-size: 12px;font-weight: 700;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  Protocol</th>
                <th rowspan="2" scope="col"
                  style="border: 1px solid #6e91aa;padding: 4px;background: #abbfce;font-size: 12px;font-weight: 700;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  Specifications</th>
                <th rowspan="2" scope="col"
                  style="border: 1px solid #6e91aa;padding: 4px;background: #abbfce;font-size: 12px;font-weight: 700;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  Result</th>
                
              </tr>
              <tr>
              </tr>
    {{#each items}} 
            <tr style="background: #f3f6f8;"> 
                <td align="center"
                  style="border: 1px solid #6e91aa;padding: 5px; font-size: 12px; font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  1</td>
                  <td align="left"
                  style="border: 1px solid #6e91aa;padding: 5px; font-size: 12px; font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  {{test}} </td>
                  <td align="left"
                  style="border: 1px solid #6e91aa;padding: 5px; font-size: 12px; font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  {{protocol}} </td>
                   <td align="left"
                  style="border: 1px solid #6e91aa;padding: 5px; font-size: 12px; font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  {{specification}} </td>
                        <td align="left"
                  style="border: 1px solid #6e91aa;padding: 5px; font-size: 12px; font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
                  {{result}} </td> 
            </tr> 
            
             {{/each}}
              
            </tbody>
          </table>
        </div> 
        <div style="display: flex;margin-top: 30px;">
          <div style="margin: 0 10px 0 0 ;width: 50%; text-align: left;"> 
            <p
              style="font-size: 12px;color: #000000;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
              Tested By</p>
          </div>
          <div style="margin: 0 0 0 10px;width: 50%; text-align: right;"> 
            <p
              style="font-size: 12px;color: #000000;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
              Authorised Signatory</p>
          </div>
        </div>
    	<div style="margin-top: 5px;border-top: 2px solid #0e4872;text-align: left;font-size: 12px;padding-top: 15px;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
    	<div> <b>Note:</b> </div>
    	<ol style="margin-top:0px">
    	<li>The test result applicable only to the sample refered above.</li>
    	<li>The sample will be stored under normal room temperature for about 90 days for in house sample & extemal samples (One month).</li>
    	</ol>
     
    	</div>
        <div
          style="text-align: center;font-size: 12px;padding-top: 15px;font-family: Roboto,Arial,Helvetica,Calibri,Clear Sans,Helvetica Neue,sans-serif;">
        
    	 <b>Page 1 of 1</b> 
          </div>
      </div> 
    </body>
    
    </html>
    

    DATA

    {
        "items": [{
            "test": "Amylase (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Absent"        
        }, {
            "test": "Moisture (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Present"        
        },
        {
            "test": "Amylase (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Absent"        
        }, {
            "test": "Moisture (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Present"        
        },
        {
            "test": "Amylase (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Absent"        
        }, {
            "test": "Moisture (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Present"        
        },
        {
            "test": "Amylase (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered ,",
            "result":"Absent"        
        }, {
            "test": "Moisture (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Present"        
        },
        {
            "test": "Amylase (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Absent"        
        }, {
            "test": "Moisture (Qualitative)*",
            "protocol":"IS 4684:1975 (RA-2015)",
            "specification":"It should be thoroughly mixed and shall be free from lumps,unpowdered jaggery, unpleasant odour and extraneous matter",
            "result":"Present"        
        }]
    }
    


  • With headers and footers, you have two options.

    Hope this helps.



  • Hi Jan, Thanks for the reply.. I fixed the page number in the footer but the content in the footer is overlapped by the body content. Can you help me in solving the issue. 0_1616855697649_Capture.PNG 0_1616855706493_Capture1.PNG

    If you need, I am ready to share my code also.
    Thanks..



  • Please create and share minimal playground demo. Thank you
    https://playground.jsreport.net/


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.