You can see the demo here, and the full code on my GitHub.
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.
Hidding the button
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:
ifeanyi · December 11, 2022 at 4:43 pm
I used your script and it works well.
I’m using Xprinter 58, but the print is not cover the page very well.
It covers 3/4 of the width.
please how do I solve the problem
parzibyte · December 11, 2022 at 4:45 pm
Turgut · October 25, 2021 at 5:14 am
Hello, I am getting blank output in the upper field. how can i remove?
parzibyte · October 25, 2021 at 10:02 am
It depends on your web CSS
Jaydev · June 13, 2021 at 5:07 am
Demo link is not working
parzibyte · June 13, 2021 at 11:46 am
Demo link is working for me
Stephanie · February 12, 2021 at 4:48 am
Hi, im working for a big health care center organization.
All we missing currently is a good way of printing. And consider the Printer frontend is React (JS) your plugin looks like really nilice feature to have.
We are willing to pay an amount if the printer plugin is functional in the system.
trucnguyen · December 2, 2020 at 8:29 pm
Thank you for your blog. I am trying to do the test with your demo page. My thermal printer is TOSHIBA TRST A1X. I can not find its driver for MAC. And I use driver Zebra ZPL Label printer. And it printed the hex value, not your bill. Can you help me fix this. Thank you!
Phong · August 10, 2020 at 8:50 am
I wanna print font A of X-printer. How?
Jan · May 10, 2020 at 2:44 am
I try to test your plugin, but i get an error:
Response: Error en el servidor: sql: no rows in result set
Can you advice me?
parzibyte · May 10, 2020 at 8:28 am
Hi. Please read the FAQ: https://parzibyte.github.io/plugin-ticket-js/en/#faq
Ben · March 25, 2020 at 12:06 am
Hey! Thank you very much for taking the time to write this. Very informative! However, I do have a silly question. You mentioned that you are using an Xprinter 58 – could you be more specific which one exactly your using? I want to avoid buying one and then not being able to print as you described in your post. would perhaps the following do the trick? (sorry for the long link)
parzibyte · March 25, 2020 at 6:29 pm
Yes, the printer in the link is correct; I have an identical one.
majed · March 22, 2020 at 4:48 am
I used your example to my project !
very very Helpful
Naseef · January 16, 2020 at 4:25 am
Will this work from a mobile phone if I connect the printer via bluetooth
parzibyte · January 16, 2020 at 1:34 pm
Hi. It will only work when the printer is connected to the pc using usb. you can print from a mobile if you use a LAN
Daniel Grima · January 13, 2020 at 7:55 am
I have a question regard the page size. Maybe it’s me not understanding how thermal printers work. But I’m building an app where a section of HTML is to be printed. For some reason when our client tested it the whole roll of paper was being used.
Basically my question is whether there’s a way to set the page height to be printed? Or is this something that is handled automatically by the printer?
parzibyte · January 13, 2020 at 11:45 am
Maybe you should define a page height in your HTML and set properly your paper size. I was having the same errors so i developed a plugin: https://parzibyte.github.io/plugin-ticket-js/en/
Daniel Grima · January 14, 2020 at 1:41 am
Yes the page height might be the issue. I’ll have to continue testing 🙂 thanks for your reply!
David · January 6, 2020 at 4:34 am
Thanks a Lot
Robert · November 26, 2019 at 3:19 pm
Hi. Did you use any external library to print using the thermal printer? I am building a php based point of sale project and so far all my research was pointing to using some external library eg – escpos-php.
Also what brand was the printer you used?
Thanks and would really appreciate your help!
parzibyte · November 26, 2019 at 3:36 pm
No, i only used JS but if you want to print directly from browser(without dialog confirmation) check my plugin: https://parzibyte.me/blog/en/2019/10/13/print-ticket-in-thermal-printer-directly-from-browser/
My printer is Xprinter 58
Fasih · November 24, 2019 at 11:52 am
VINICIUS RODRIGUES FILENGA · November 19, 2019 at 6:52 am
thank you so much. I used your example to build my own receipt!
I am also about to test ur plugin!
parzibyte · November 19, 2019 at 8:59 am
You are welcome 🙂