jsreport forum

secotechnologies

Thanks @bjrmatos and @jan_blaha for your quick response. It was working fine.

secotechnologies

Hi Jan,
I created a playground and added my code there. Actually footer shows perfectly in last page but in the first it is hidden under a table. Can you please help me on resolving the footer issue?
https://playground.jsreport.net/w/anon/676XyVHM
Thank you

secotechnologies

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.

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

secotechnologies

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_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"        
    }]
}

Bala

@secotechnologies

Posts made by secotechnologies