31

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?

||||||
  • Quite harsh demands, here... I which way are you able to print trough the POS-printer today? I believe you need some server-side handling (hence my suggestion would be a AJAX-call to a ServerSide-script doing the printing. – mariusnn Jul 13 '12 at 3:39
  • 2
    I think this is beyond the scope of JavaScript alone. You can do things like use JavaScript to help create an HTML document that's formatted for printing, and even launch the print dialog so that the user just clicks the "Print" button.... as long as the POS printer is installed on the PC and set as a option in the printer list. Printing requires drivers that work for that printer, and JS can't dive into the hardware of a machine unless you are running in an environment where there are API's available to tap into the hardware. But that won't happen in a browser. – jwatts1980 Jul 13 '12 at 3:45
  • Might be helpful if you provide some more info; What have you got so far? Do you just want to be able to print - or is this specific to POS? Google returned me quite a few examples of using JS to print. – Nick Jul 13 '12 at 3:48
  • Epson seems to be one of the only printers capable of this check out there ePOS Javascript SDK docs download.epson-biz.com/modules/pos/… – SomethingOn Apr 3 '19 at 14:35
15

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/

||||||
  • how about printing from a web browser in a mobile device like android? – radztech Jan 16 '14 at 8:39
  • @radztech - same situation there – Scott Selby Jan 16 '14 at 16:49
  • 2
    github.com/qzind/tray – Erol Guzoğlu Jul 18 '16 at 11:37
  • @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 – Scott Selby Jul 22 '16 at 15:07
  • @ScottSelby - the link provided by ErolGuzoğlu talks back to a client on the desktop which has access to the printers, etc. – tresf Sep 1 '16 at 6:09
7

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
||||||
  • Alternatively to PDF, content styled through CSS with media="print" will do the job. – clapas Sep 17 '13 at 18:07
  • Possibly. Can you turn off the headers and footers when you normally print a page and control the page size accurately with media="print" ? – Craig Sep 18 '13 at 1:18
7

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.


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.

||||||
  • 1
    Looks like chrome.usb* api is available only for chrome extensions and not from javascript. – Karthik Sankar Feb 27 '15 at 14:57
  • @FelipeAlarcon I'm sorry i don't have a copy of the contents of the link. Hopefully, someone here have a copy. – Richard Cotrina Dec 23 '15 at 4:44
  • 1
    @FelipeAlarcon found the source! Answer is updated. :) – Richard Cotrina Dec 23 '15 at 5:01
7

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);
....
....
....

}
||||||
  • I'm also using TM-88V from Epson. I think only Epson got such capability to print via Javascript. – teapeng Jun 1 '18 at 2:53
  • @HAbin Sheikh did you used bluetooth variant or wifi variant? is it possible to print receipt from javascript in bluetooth variant? – Mubarak Basha Aug 20 '18 at 3:45
  • 1
    it is possible to print with a TM T-20 by USB? – vcasas Aug 22 '18 at 19:01
  • where does isSSL come from and why is the var isRegPrintConnected missing? – Jim Vercoelen Nov 21 '18 at 18:16
  • 1
    For this asking, Epson has a list of supported printers and interfaces for their ePOS Javascript SDK download.epson-biz.com/modules/pos/… – SomethingOn Apr 3 '19 at 14:34
4

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

||||||
  • 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. – Karthik Sankar Mar 4 '15 at 14:52
  • 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. – Craig Mar 29 '15 at 11:23
  • 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. – Karthik Sankar May 20 '15 at 22:23
  • I haven't tried this printer yet. I would like to test and support more printers but they are expensive! – Craig May 24 '15 at 23:35
  • i looked into this and the code. but idk what to use in the printer URL when the printer is connected via USBport – Surge Pedroza Nov 30 '17 at 3:47
3

Maybe you could have a look at this if your printer is an epson. There is a javascript driver

http://spsrprofessionals.com/ClientSite/readers/ePOS-Print_SDK_141020E/JavaScript/ePOS-Print_SDK_JS_en_revB.pdf

EDIT:

Previous link seems to be broken

All details about how to use epos of epson are on epson website:

https://reference.epson-biz.com/modules/ref_epos_device_js_en/index.php?content_id=139

||||||
  • The link you posted about EPSON's ePOS is broken. – chipit24 Nov 7 '16 at 23:46
1

try Escpos for PHP POS printing use https://github.com/mike42/escpos-php

||||||
1

You could try using https://www.printnode.com which is essentially exactly the service that you are looking for. You download and install a desktop client onto the users computer - https://www.printnode.com/download. You can then discover and print to any printers on that user's computer using their JSON API https://www.printnode.com/docs/api/curl/. They have lots of libs here: https://github.com/PrintNode/

||||||
  • 2
    is there a version of PrintNode you can host on your own server to assure privacy of your documents? – phyzalis Aug 16 '16 at 11:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.