Thanks @bjrmatos and @jan_blaha for your quick response. It was working fine.
S
Posts made by secotechnologies
-
RE: Need help on JSReport footerposted in general forum
-
RE: Need help on JSReport footerposted in general forum
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 -
RE: Need help on JSReport footerposted in general forum
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.. -
Need help on JSReport footerposted in general forum
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" }] }