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