HTML CSS print out POS size?
17,359
@Jack This how I go about it.
My HTML
$html = '<style>
body {
font-size: 10px;
font-family:Calibri;
}
table {
font-size: 10px;
font-family:Calibri;
}
</style>
<table style="width:100%">
<tr>
<td align ="left">SALE ORDER NO</td>
<td align ="right">S01</td>
</tr>
<tr>
<td align ="left">SALE ORDER D/TIME</td>
<td align ="right">2009/01/01</td>
</tr>
<tr>
<td align ="left">CUSTOMER</td>
<td align ="right">JOHN DOE</td>
</tr>
</table>
';
My Javascript
function PrintElem()
{
Popup($html);
}
function Popup(data)
{
var myWindow = window.open('', 'Receipt', 'height=400,width=600');
myWindow.document.write('<html><head><title>Receipt</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('<style type="text/css"> *, html {margin:0;padding:0;} </style>');
myWindow.document.write('</head><body>');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
Thats it. Its works like charm with Chrome.
Author by
Kodr.F
“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler
Updated on July 26, 2022Comments
-
Kodr.F almost 2 years
I am trying to print out
POStemplate from the browser. When I click onCTRL+P, it prints the whole page.
I want to print only the receipt without margins or padding in printing out, like this:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /> <title>CodePen - POS Receipt Template Html Css</title> <style> @media print { .page-break { display: block; page-break-before: always; } } #invoice-POS { box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); padding: 2mm; margin: 0 auto; width: 44mm; background: #FFF; } #invoice-POS ::selection { background: #f31544; color: #FFF; } #invoice-POS ::moz-selection { background: #f31544; color: #FFF; } #invoice-POS h1 { font-size: 1.5em; color: #222; } #invoice-POS h2 { font-size: .9em; } #invoice-POS h3 { font-size: 1.2em; font-weight: 300; line-height: 2em; } #invoice-POS p { font-size: .7em; color: #666; line-height: 1.2em; } #invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot { /* Targets all id with 'col-' */ border-bottom: 1px solid #EEE; } #invoice-POS #top { min-height: 100px; } #invoice-POS #mid { min-height: 80px; } #invoice-POS #bot { min-height: 50px; } #invoice-POS #top .logo { height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/logo1.png) no-repeat; background-size: 60px 60px; } #invoice-POS .clientlogo { float: left; height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/client.jpg) no-repeat; background-size: 60px 60px; border-radius: 50px; } #invoice-POS .info { display: block; margin-left: 0; } #invoice-POS .title { float: right; } #invoice-POS .title p { text-align: right; } #invoice-POS table { width: 100%; border-collapse: collapse; } #invoice-POS .tabletitle { font-size: .5em; background: #EEE; } #invoice-POS .service { border-bottom: 1px solid #EEE; } #invoice-POS .item { width: 24mm; } #invoice-POS .itemtext { font-size: .5em; } #invoice-POS #legalcopy { margin-top: 5mm; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no" > <div id="invoice-POS"> <center id="top"> <div class="logo"></div> <div class="info"> <h2>SBISTechs Inc</h2> </div><!--End Info--> </center><!--End InvoiceTop--> <div id="mid"> <div class="info"> <h2>Contact Info</h2> <p> Address : street city, state 0000</br> Email : [email protected]</br> Phone : 555-555-5555</br> </p> </div> </div><!--End Invoice Mid--> <div id="bot"> <div id="table"> <table> <tr class="tabletitle"> <td class="item"><h2>Item</h2></td> <td class="Hours"><h2>Qty</h2></td> <td class="Rate"><h2>Sub Total</h2></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext">Communication</p></td> <td class="tableitem"><p class="itemtext">5</p></td> <td class="tableitem"><p class="itemtext">$375.00</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext">Asset Gathering</p></td> <td class="tableitem"><p class="itemtext">3</p></td> <td class="tableitem"><p class="itemtext">$225.00</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext">Design Development</p></td> <td class="tableitem"><p class="itemtext">5</p></td> <td class="tableitem"><p class="itemtext">$375.00</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext">Animation</p></td> <td class="tableitem"><p class="itemtext">20</p></td> <td class="tableitem"><p class="itemtext">$1500.00</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext">Animation Revisions</p></td> <td class="tableitem"><p class="itemtext">10</p></td> <td class="tableitem"><p class="itemtext">$750.00</p></td> </tr> <tr class="tabletitle"> <td></td> <td class="Rate"><h2>tax</h2></td> <td class="payment"><h2>$419.25</h2></td> </tr> <tr class="tabletitle"> <td></td> <td class="Rate"><h2>Total</h2></td> <td class="payment"><h2>$3,644.25</h2></td> </tr> </table> </div><!--End Table--> <div id="legalcopy"> <p class="legal"><strong>Thank you for your business!</strong> Payment is expected within 31 days; please process this invoice within that time. There will be a 5% interest charge per month on late invoices. </p> </div> </div><!--End InvoiceBot--> </div><!--End Invoice--> </body> </html>Any idea how to achieve this ?