Not Able To Set Page Number In Latest Chrome Browser Using Print Css
I am trying to print a invoice which goes over 2 pages and i want the page number to be displayed at the bottom while printing. It works fine on Firefox but chrome just prints page
Solution 1:
I found a way to do this in chrome using jquery somehow.
var bottom = 0;
$(document).ready(function() {
$("table:nth-child(9n)").each(function() {
bottom -= 5;
botString = bottom.toString();
var $counter = $('.footer.first').clone().removeClass('first');
$counter.css("bottom", botString + "vh");
($counter).insertBefore('.insert');
});
});
@charset"utf-8";
/* CSS Document */@page {
size:8.27in11.69in;
margin: 0.5cm;
}
body { font-family:"Courier New", Courier, monospace; line-height: 1.5;
font-size: 11pt; }
.header { position:fixed; top:0; text-align:center; width:100%; margin: 0 auto; height:100px; bottom:1em; }
.page-layout {
page-break-after: always; position: relative;
width: 100%;
top:2em; //match size of headerleft:0px;
right:0px;
}
body { counter-reset: page; }
.footer {text-align:center; width:100%; margin:0 auto; position: absolute; }
.footer::after { top: 95vh; position: relative;
white-space: nowrap;
z-index: 20px; width:100%; margin:0 auto; text-align:center;
counter-increment: page;
content:"Page "counter(page);
}
.inv-details { }
.tstripe { border-top:2px dashed #000;}
table {
page-break-inside: avoid;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="footer first"></div><divclass="insert"></div><divclass="header">Commercial Invoice</div><divclass="page-layout"><tableclass="inv-details"width="100%"><tr><td>Invoice Number</td><td>Purpose of Shipment</td><td>Curr <br /> USD</td><td>Ult Dest. <br /> US </td></tr><tr><td>Export Dt <br /> 8/14/2017 </td><td>C.I. References </td><td>Pkgs <br /> 1 <br /> OTH </td><td>Bill T/C <br /> 1378-4267-0 </td></tr></table><tableclass="tstripe"width="100%"><tr><tdwidth="50%">Shipper: <br />
VENNY PERSAUD <br />
SBC INC, <br />
130 MATHESON BLVD, E, <br />
UNIT 1</td><tdwidth="50%">Consignee: <br />
Marlon Browder <br />
Marlon Browder <br />
320 E GILLESPIE ST
</td></tr><tr><tdwidth="50%">MISSISSAUGE <br />
ON L4Z1Y6 CA (866) 330-1272 <br />
ID / EIN: </td><tdwidth="50%">STARKVILLE <br />
MS 39759 US (622) 617-9890 <br />
ID / EIN:
</td></tr></table><tableclass="tstripe"width="100%"><tr><tdvalign="top"width="50%">
Broker <br />
FedEx Ground's Broker
</td><td>
Importer <br />
VENNY PERSAUD <br />
SBC INC, <br />
130 MATHESON BLVD, E, <br />
UNIT 1 <br />
MISSISSAUGA <br />
ON L4Z1Y6 CA (866) 330 - 1272 <br />
ID / EIN: <br /></td></tr></table><!-- Item 1 --><tableclass="tstripe"width="100%"><tr><td>Part Nbr:</td><td>Marks / Nbrs: </td><td>Cntry MFG: US </td><td> Net Wgt: 0.00 lbs</td></tr></table><tablewidth="100%"><tr><td>HS Code: 9503.90 </td><td>Unit Qty: 1.00 PCS </td><td>Unit Value: 5.600000</td><td>Commodity Value: 5.60 </td></tr><tr><tdcolspan="4">
Desc: Foil Ballon
</td></tr></table><!-- Item 2 --><tableclass="tstripe"width="100%"><tr><td>Part Nbr:</td><td>Marks / Nbrs: </td><td>Cntry MFG: US </td><td> Net Wgt: 0.00 lbs</td></tr></table><tablewidth="100%"><tr><td>HS Code: 9503.90 </td><td>Unit Qty: 1.00 PCS </td><td>Unit Value: 5.600000</td><td>Commodity Value: 5.60 </td></tr><tr><tdcolspan="4">
Desc: Foil Ballon
</td></tr></table><!-- Item 3 --><tableclass="tstripe"width="100%"><tr><td>Part Nbr:</td><td>Marks / Nbrs: </td><td>Cntry MFG: US </td><td> Net Wgt: 0.00 lbs</td></tr></table><tablewidth="100%"><tr><td>HS Code: 9503.90 </td><td>Unit Qty: 1.00 PCS </td><td>Unit Value: 5.600000</td><td>Commodity Value: 5.60 </td></tr><tr><tdcolspan="4">
Desc: Foil Ballon
</td></tr></table><!-- Item 4 --><tableclass="tstripe"width="100%"><tr><td>Part Nbr:</td><td>Marks / Nbrs: </td><td>Cntry MFG: US </td><td> Net Wgt: 0.00 lbs</td></tr></table><tablewidth="100%"><tr><td>HS Code: 9503.90 </td><td>Unit Qty: 1.00 PCS </td><td>Unit Value: 5.600000</td><td>Commodity Value: 5.60 </td></tr><tr><tdcolspan="4">
Desc: Foil Ballon
</td></tr></table><!-- Item 5 --><tableclass="tstripe"width="100%"><tr><td>Part Nbr:</td><td>Marks / Nbrs: </td><td>Cntry MFG: US </td><td> Net Wgt: 0.00 lbs</td></tr></table><tablewidth="100%"><tr><td>HS Code: 9503.90 </td><td>Unit Qty: 1.00 PCS </td><td>Unit Value: 5.600000</td><td>Commodity Value: 5.60 </td></tr><tr><tdcolspan="4">
Desc: Foil Ballon
</td></tr></table><!-- Item 6 --><tableclass="tstripe"width="100%"><tr><td>Part Nbr:</td><td>Marks / Nbrs: </td><td>Cntry MFG: US </td><td> Net Wgt: 0.00 lbs</td></tr></table><tablewidth="100%"><tr><td>HS Code: 9503.90 </td><td>Unit Qty: 1.00 PCS </td><td>Unit Value: 5.600000</td><td>Commodity Value: 5.60 </td></tr><tr><tdcolspan="4">
Desc: Foil Ballon
</td></tr></table><!-- Total --><tableclass="tstripe"width="100%"style="margin-top:30px;"><tr><tdalign="right">Total Shipment Weight::</td><td>1</td><tdalign="right">Total Commodity </td><tdalign="right">29.12</td></tr><tr><tdalign="right"colspan="3">Terms of Sale:</td><tdalign="right">FCA</td></tr><tr><tdalign="right"colspan="3">Freight:</td><tdalign="right">0.00</td></tr><tr><tdalign="right"colspan="3">Insurance:</td><tdalign="right">0.00</td></tr><tr><tdalign="right"colspan="3">Others:</td><tdalign="right">0.00</td></tr><tr><tdalign="right"colspan="3">Total Invoice Value:</td><tdalign="right">29.12</td></tr></table><table><tr><td> Comments</td></tr><tr><td>1) </td></tr><tr><td>2) </td></tr><tr><td>3) </td></tr><tr><td>Tracking Numbers: 738443302589 </td></tr><tr><td>I declare all information in this invoice to be true and correct. </td></tr><tr><td>Signature of shipper: VENNY PERSAUD <spanstyle="float:right;">8/14/2017</span></td></tr></table></div>
Post a Comment for "Not Able To Set Page Number In Latest Chrome Browser Using Print Css"