Designing the ticket
First we have to write the HTML to print the ticket, in this case I will use a table to render the contents in a better way. Also, I’m using a image taken from pixabay. The code looks like this:
Remember: this is a static example, you can always use a framework (client side or server side) to render the content in a dynamic way.
We have some CSS Classes, for example “centered”. We have a button to print the ticket as well and we are loading a CSS file to give style.
Now we have to give some style to our receipt. Here’s the CSS code:
I’m giving a fixed width to each thing, this way we take a small space because the thermal paper is narrow. So far we have this:
Now we can print the ticket, or make the button to print it.
In CSS we have the
hidden-print class, that class is used to hide the button when we print the receipt.
Printing ticket in thermal printer
We are only calling
window.print to tell the browser to print the document. When we press it, depending on the browser, a window appears, and there we can select the printer and some features.
Note: if you want to hide the dialog, you can use my plugin.
I am using Chrome, the thermal printer I have is a Xprinter 58, please note that I am not using any margins, so we can take the full space:
And when I click “Print” Chrome sends the receipt to the printer and we have this: