In this post I will show you how to print a ticket or receipt by using JavaScript (client side) and a thermal printer. At the end we will have a great ticket that looks like this:
Obviously you can change the font family, size, logo and so on. And remember: we will be using only pure CSS, HTML & JavaScript, no frameworks; though you can use any framework to render the content before printing.
You can see the demo here, and the full code on my GitHub.
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.
The JavaScript code is small. It is like this:
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:
In this way we can print anything by using a Thermal printer, CSS, HTML and JavaScript. The only issue is that we have to confirm the action, but I have developed the solution by using a plugin.
In the last months I have been working on a ticket designer to print on…
In this post you will learn how to use the Origin Private File System with…
In this post you will learn how to download a file in the background using…
In this post I will show you how to use SQLite3 directly in the web…
In this tutorial, we'll explore how to effortlessly print receipts, invoices, and tickets on a…
When printing receipts on thermal printers (ESC POS) sometimes it is needed to print images…
Esta web usa cookies.
Ver comentarios
Thanks a lot for this, I searched all over the internet for a solution to print labels with thermal printer but only urs gave the me answer I wanted!!
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
https://parzibyte.me/plugin-impresora-termica-v1/
Hello, I am getting blank output in the upper field. how can i remove?
It depends on your web CSS
Demo link is not working
Demo link is working for me
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.
please reply!
Hi author,
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!
I wanna print font A of X-printer. How?
Hi,
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?
Regards
Hi. Please read the FAQ: https://parzibyte.github.io/plugin-ticket-js/en/#faq
Regards :)
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)
Yes, the printer in the link is correct; I have an identical one.
Regards :)
thanks
I used your example to my project !
very very Helpful