Javascript receipt printing using POS Printer

Question

In a web application I want to print a receipt using a POS (Point of Sale) Printer. I want to do that with Javascript. Can anyone provide me an example for that?

Solution 1

I'm going out on a limb here , since your question was not very detailed, that a) your receipt printer is a thermal printer that needs raw data, b) that "from javascript" you are talking about printing from the web browser and c) that you do not have access to send raw data from browser

Here is a Java Applet that solves all that for you , if I'm correct about those assumptions then you need either Java, Flash, or Silverlight http://code.google.com/p/jzebra/

Solution 2

I have recently implemented the receipt printing simply by pressing a button on a web page, without having to enter the printer options. I have done it using EPSON javascript SDK for ePOS. I have test it on EPSON TM-m30 receipt printer.

Here is the sample code.

var printer = null;
var ePosDev = null;

function InitMyPrinter() {
    console.log("Init Printer");

    var printerPort = 8008;
    var printerAddress = "192.168.198.168";
    if (isSSL) {
        printerPort = 8043;
    }
    ePosDev = new epson.ePOSDevice();
    ePosDev.connect(printerAddress, printerPort, cbConnect);
}

//Printing
function cbConnect(data) {
    if (data == 'OK' || data == 'SSL_CONNECT_OK') {
        ePosDev.createDevice('local_printer', ePosDev.DEVICE_TYPE_PRINTER,
            {'crypto': false, 'buffer': false}, cbCreateDevice_printer);
    } else {
        console.log(data);
    }
}

function cbCreateDevice_printer(devobj, retcode) {
    if (retcode == 'OK') {
        printer = devobj;
        printer.timeout = 60000;
        printer.onreceive = function (res) { //alert(res.success);
            console.log("Printer Object Created");

        };
        printer.oncoveropen = function () { //alert('coveropen');
            console.log("Printer Cover Open");

        };
    } else {
        console.log(retcode);
        isRegPrintConnected = false;
    }
}

function print(salePrintObj) {
    debugger;
    if (isRegPrintConnected == false
        || printer == null) {
        return;
    }
    console.log("Printing Started");


    printer.addLayout(printer.LAYOUT_RECEIPT, 800, 0, 0, 0, 35, 0);
    printer.addTextAlign(printer.ALIGN_CENTER);
    printer.addTextSmooth(true);
    printer.addText('\n');
    printer.addText('\n');

    printer.addTextDouble(true, true);
    printer.addText(CompanyName + '\n');

    printer.addTextDouble(false, false);
    printer.addText(CompanyHeader + '\n');
    printer.addText('\n');

    printer.addTextAlign(printer.ALIGN_LEFT);
    printer.addText('DATE: ' + currentDate + '\t\t');

    printer.addTextAlign(printer.ALIGN_RIGHT);
    printer.addText('TIME: ' + currentTime + '\n');

    printer.addTextAlign(printer.ALIGN_LEFT);

    printer.addTextAlign(printer.ALIGN_RIGHT);
    printer.addText('REGISTER: ' + RegisterName + '\n');
    printer.addTextAlign(printer.ALIGN_LEFT);
    printer.addText('SALE # ' + SaleNumber + '\n');

    printer.addTextAlign(printer.ALIGN_CENTER);
    printer.addTextStyle(false, false, true, printer.COLOR_1);
    printer.addTextStyle(false, false, false, printer.COLOR_1);
    printer.addTextDouble(false, true);
    printer.addText('* SALE RECEIPT *\n');
    printer.addTextDouble(false, false);
....
....
....

}

Solution 3

EDIT: NOV 27th, 2017 ─ BROKEN LINKS

Links below about the posts written by David Kelley are broken.

There are cached versions of the repository, just add cache: before the URL in the Chrome Browser and hit enter.

• 1st POST: Cached | Medium Post
• 2nd POST: Cached

---

This solution is only for Google Chrome and Chromium-based browsers.

EDIT:

(*)The links are broken. Fortunately I found this repository that contains the source of the post in the following markdown files: A | B

This link* explains how to make a Javascript Interface for ESC/POS printers using Chrome/Chromium USB API (1)(2). This link* explains how to Connect to USB devices using the chrome.usb.* API.

Solution 4

If you are talking about a browser based POS app then it basically can't be done out of the box. There are a number of alternatives.

1. Use an applet like Scott Selby says
2. Print from the server. If this is a cloud server, ie not connectable to the receipt printer then what you can do is
   • From the server generate it as a pdf which can be made to popup a print dialog in the browser
   • Use something like Google Cloud Print which will allow connecting printers to a cloud service

Solution 5

I printed form javascript to a Star Micronics Webprnt TSP 654ii thermal printer. This printer is a wired network printer and you can draw the content to a HTML canvas and make a HTTP request to print. The only caveat is that, this printer does not support HTTPS protocol yet, so you will get a mixed content warning in production. Contacted Star micronics support and they said, they are working on HTTPS support and soon a firmware upgrade will be available. Also, looks like Epson Omnilink TM-88V printer with TM-I will support javascript printing.

Here is a sample code: https://github.com/w3cloud/starwebprint

View more solutions

Comments

[clapas]

Alternatively to PDF, content styled through CSS with media="print" will do the job.

[Craig]

Possibly. Can you turn off the headers and footers when you normally print a page and control the page size accurately with media="print" ?

[radztech]

how about printing from a web browser in a mobile device like android?

[Scott Selby]

@radztech - same situation there

[Karthik Sankar]

Looks like chrome.usb* api is available only for chrome extensions and not from javascript.

[Karthik Sankar]

Thermal printers capable of printing directly from javascript are expensive. Besides the mixed content warning is a bummer. So, I concluded directly printing from javascript is not a good idea at this time. Instead, I utilized the media print tag and called the window.print to open the print dialog. Also, in kiosk mode, chrome can print without even showing print preview dialog. This is cool and pretty much the same effect as printing directly.

[Craig]

I have used these printers as well. The price is a bit annoying. I have spoken to Star and they say an update that supports HTTPS is coming.

[Karthik Sankar]

I desperately need javascript html5 canvas printing. If any of you have tried Epson TM-20ii-I Omni link printer, please share your experience. Wish to know if it supports https or not.

[Craig]

I haven't tried this printer yet. I would like to test and support more printers but they are expensive!

[Richard Cotrina]

@FelipeAlarcon I'm sorry i don't have a copy of the contents of the link. Hopefully, someone here have a copy.

[Richard Cotrina]

@FelipeAlarcon found the source! Answer is updated. :)

[Erol Guzoğlu]

github.com/qzind/tray

[Scott Selby]

@ErolGuzoğlu - that is still from the browser. Not from the client code that is written as part of a website in javascript. The browser running on the operating system can access a lot more that the javascript from a website which the browser is executing

[phyzalis]

is there a version of PrintNode you can host on your own server to assure privacy of your documents?

[tresf]

@ScottSelby - the link provided by ErolGuzoğlu talks back to a client on the desktop which has access to the printers, etc.

[chipit24]

The link you posted about EPSON's ePOS is broken.

[Temitayo]

now qz.io

[Serge Pedroza]

i looked into this and the code. but idk what to use in the printer URL when the printer is connected via USBport

[TPG]

I'm also using TM-88V from Epson. I think only Epson got such capability to print via Javascript.

[Mubarak Basha]

@HAbin Sheikh did you used bluetooth variant or wifi variant? is it possible to print receipt from javascript in bluetooth variant?

[vicasas]

it is possible to print with a TM T-20 by USB?

[Jim Vercoelen]

where does isSSL come from and why is the var isRegPrintConnected missing?

[SomethingOn]

For this asking, Epson has a list of supported printers and interfaces for their ePOS Javascript SDK download.epson-biz.com/modules/pos/…

[Habib Sheikh]

@teapeng agreed, right ePOS models of the Epson are supporting javascript printing

[Habib Sheikh]

@JimVercoelen you need to add these variables if you copy exact code.

[Naveed Ali]

@HabibSheikh i am trying to print via Fiscal FP-81II RT but i am having some issues, i would really appreciate if you can give me an idea of it.

[Nikhil Mohanan]

@KarthikSankar I am also wanted to use star micronics printer. I am using a SK1 printer connected to PC using a USB. How can i configure the localhost port to send the print command. ? I am stucked here .

[Vandana Chadha]

@HabibSheikh Did you test with a simulator and if yes, which one?