Basic Structure
Use a simple and clean HTML structure for a POS receipt. A well-structured template improves readability and printing consistency.
<div class="receipt">
<h2>Store Name</h2>
<p>Address Line 1<br>City, State ZIP</p>
<hr>
<table>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
<tr>
<td>Product A</td>
<td>1</td>
<td>$10.00</td>
</tr>
</table>
<hr>
<p>Total: $10.00</p>
<p>Thank you for your purchase!</p>
</div>
Key Elements
- Header: Store name, address, and optional contact details.
- Itemized List: Displays purchased items, quantities, and prices in a structured format.
- Total Calculation: Summarizes the total cost, including taxes and discounts if applicable.
- Footer: A thank-you message or return policy information.
Printing Considerations
For a seamless printing experience, apply CSS styles tailored for thermal printers:
@media print {
body { font-family: Arial, sans-serif; }
.receipt { width: 58mm; padding: 10px; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; }
}
Enhancements
To improve functionality, integrate JavaScript for auto-printing and dynamic data population:
- Auto-printing:
window.print(); - Dynamic data: Fetch order details via JavaScript.
- QR Code: Add a payment or feedback QR code.
POS Receipt Template in HTML: A Practical Guide
Structuring a Basic Layout with HTML and CSS
Implementing Dynamic Data Binding for Transactions
Customizing Fonts, Spacing, and Alignment for Clarity
Adding Barcode and QR Code Support
Handling Print Styles for Various Paper Sizes
Integrating JavaScript for Auto-Print and Interaction
Define a structured layout using a simple <div>-based design with flexbox or grid for alignment. Wrap the receipt content inside a container with a fixed width to match common paper sizes.
Use dynamic data binding by embedding placeholders like <span id="total"></span> and updating values via JavaScript. Fetch transaction data from an API or local storage and insert it dynamically.
Adjust typography using monospace fonts for numbers and transaction details. Set clear margins and padding to improve readability. Align totals and itemized costs using text-align: right; for precision.
Integrate barcode and QR code generation with libraries like JsBarcode and QRCode.js. Render codes inside a designated <canvas> or <svg> element to ensure print quality.
Apply @media print styles to remove unnecessary elements, enforce page breaks, and optimize layout for different paper sizes. Set body { width: 80mm; } to match thermal receipt printers.
Enable auto-print functionality by triggering window.print() after the receipt is loaded. Add an event listener to detect print completion and execute additional actions, such as saving transaction data.
