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_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.
-
using powerful pdf utils and merge another template
https://jsreport.net/learn/pdf-utils
https://playground.jsreport.net/w/admin/kMI4FBmw -
use limited chrome native headers config
https://jsreport.net/learn/chrome-pdf#native-headers-and-footers
https://playground.jsreport.net/w/anon/zPDOcZ5u
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.
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/
-
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 you need to add a pdf page margin bottom to the pages to give some space to the footer to fit without conflict with the original content when merging.
go to chrome pdf options and define the margin-bottom, you can put there a value that fit the most with the kind of content you are going to produce
-
Thanks @bjrmatos and @jan_blaha for your quick response. It was working fine.
