How to print raw commands and pdf files from iOS, Android, ChromeOS and sandboxed devices from Javascript

Product JSPrintManager Published 01/15/2019 Updated 09/07/2023 Author

Overview

JSPrintManager (a.k.a. JSPM) can be installed and configured as a dedicated print service on a given machine allowing clients such as mobile & sandboxed devices (running iOS, Android, ChromeOS, etc.) and Terminal Services/Citrix environments to print from your website! It's usefull for scenarios like POS mobile ordering system which needs printing support (Restaurants, Bars, etc)

 Android (Bluetooth Raw Commands Printing)

A JSPrintManager app for Android is available but it supports the following features only:

• Listing of paired Bluetooth devices
• Printing raw commands to Bluetooth printers through BluetoothPrinter class
• BIDI Bluetooth communication through BTComm class

If you need to print raw commands only, then just download and install the JSPrintManager for Android and do not follow the "Print Server" configuration approach stated in this article.

The following figure shows the printing scenario:

JSPrintManager in print service mode
JSPrintManager - Print service mode sample scenario

Reference

  • 1 They are the mobile and sandboxed devices running iOS, Android, ChromeOS, etc. that browse your website and will print to the "print server" machine 3
  • 2 It's the website you design and develop to allow printing from client devices by using JSPrintManager (JSPM) Javascript code. Your website can be hosted anywhere and can be written in any web development platform like ASP.NET MVC/CORE, PHP, Django, Ruby On Rails (RoR), Express.js, Angular, React, etc.
  • 3 It's the "print server" machine or device that must run any OS supported by JSPrintManager App. The supported OSes are Desktop & Server Windows, Linux, macOS/OSX, Raspberry Pi/Raspbian. So the printer server can be a desktop PC, a server or just a RPi!
  • 4 It's the target printer (a single one or many!) which can be reached from the "print server" 3. It can be any kind of printer!


Follow up these steps

We'll set up this scenario by starting from the "print server" to the client devices.

Print Server Configuration

  • Download and Install JSPrintManager (JSPM) (Available for Windows, Linux, Raspberry Pi & macOS/OSX) on the machine or device that will be the "print server".
  • After installing JSPM App, it will create and install a JSPM_CA.CER file under C:\Users\[USER]\AppData\Local\.neodynamic\jspm\ca for Windows, and under ~/.neodynamic/jspm/ca for Unix OSes. This JSPM_CA.CER file must be installed at any client device that wants to print from your website! You could add a download link at your website so any client device can download and install it.

    IMPORTANT!
    You might need to add any other domains, hostnames or IPs if you expose the local IP address of this "print server" for external access. Those values must be added into the san (Subject Alternate Name) file under C:\Users\[USER]\AppData\Local\.neodynamic\jspm for Windows, and under ~/.neodynamic/jspm for Unix OSes by editing it with any text editor but consider adding one single value per line!
    After this is done, you must re-create the JSPM_CA.CER file by clicking on the Reconfigure SSL Certificates... option of the JSPrintManager App icon in the system tray so the specified domains and/or IPs in the san file are now protected by the new certificate.

  • Grab the local IP address of this "print server" as you'll need it for next step. For our sample code, let's suppose the print server IP address is 10.0.0.1

Website Configuration

  • We'll create a simple page allowing to print a PDF file to any installed printer available in the print server machine.

    More advanced printing scenarios like print raw commands and files to different printers can be accomplished without problems but for simplicity, we'll just print a pdf file to an installed printer. Please refer to JSPrintManager Articles & HOWTOs section for further samples.

  • By using your favorite Web Development IDE or Text Editor, create a new HTML file like index.html
    Copy/paste the following snipped codes:

    HTML Code

    
<div style="text-align:center">
    <h1>Print PDF file from iOS & Android devices</h1>
    <hr />
    <label class="checkbox">
        <input type="checkbox" id="useDefaultPrinter" /> <strong>Print to Default printer</strong>
    </label>
    <p>or...</p>
    <div id="installedPrinters">
        <label for="installedPrinterName">Select an installed Printer:</label>
        <select name="installedPrinterName" id="installedPrinterName"></select>
    </div>
    <br /><br />
    <button type="button" onclick="print();">Print Now...</button>
</div>

    Script References

    • Download JSPrintManager.js
    • Copy all of these *.js files to the same folder where your html page is located and the add the following script references to your page.

    



<script src="JSPrintManager.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    Script Code

    To start JSPM, we must specify the local IP Address of the printer server machine! Let's suppose the print server IP address is 10.0.0.1

    In the code below, a test pdf file from 'https://neodynamic.com/temp/LoremIpsum.pdf' will be printed. Of course, you can change it below to point to other external URL (just be sure that CORS is enabled) or to a local pdf file by using relative paths like './content/LoremIpsum.pdf'

    
<script>

    //WebSocket settings
    JSPM.JSPrintManager.auto_reconnect = true;
    JSPM.JSPrintManager.start(true, '10.0.0.1', 25443);
    JSPM.JSPrintManager.WS.onStatusChanged = function () {
        if (jspmWSStatus()) {
            //get client installed printers
            JSPM.JSPrintManager.getPrinters().then(function (myPrinters) {
                var options = '';
                for (var i = 0; i < myPrinters.length; i++) {
				    options += '<option>' + myPrinters[i] + '</option>';
				}
                $('#installedPrinterName').html(options);
            });
        }
    };

    //Check JSPM WebSocket status
    function jspmWSStatus() {
        if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
            return true;
        else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
            alert('JSPrintManager (JSPM) is not installed or not running in the print server! Download and install JSPM Client App from https://neodynamic.com/downloads/jspm');
            return false;
        }
        else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Blocked) {
            alert('JSPM has blocked this website!');
            return false;
        }
    }

    //Do printing...
    function print(o) {
        if (jspmWSStatus()) {
            //Create a ClientPrintJob
            var cpj = new JSPM.ClientPrintJob();
            //Set Printer type (Refer to the help, there many of them!)
            if ($('#useDefaultPrinter').prop('checked')) {
                cpj.clientPrinter = new JSPM.DefaultPrinter();
            } else {
                cpj.clientPrinter = new JSPM.InstalledPrinter($('#installedPrinterName').val());
            }
            //Set content to print... in this sample, a pdf file
            var myPdfFile = new JSPM.PrintFilePDF('https://neodynamic.com/temp/LoremIpsum.pdf', JSPM.FileSourceType.URL, 'myFileToPrint.pdf', 1);
            //add file to print job
            cpj.files.push(myPdfFile);

            //Send print job to printer!
            cpj.sendToClient();
        }
    }

</script>
  • That's it! This simple website with just one page is ready to be tested from any mobile devices. But before testing the website from a mobile device, a simple configuration on it must be done. Go to next last step, please.

Client Device Configuration

The only simple task to do on any client device to print to the print server consists in downloading and installing the JSPM_CA.CER file which is available in the print server machine. To download the certificate file on the device, just provide a link to download the JSPM_CA.CER file file or another simple method is to send it as an email attachment and open it in the client device.

To install the JSPM_CA.CER file refer to each device manufacturer method. Here's some help articles for iOS and Android:

That's all! Now you can test the above simple page website for printing from the client device to the print server.

IMPORTANT:

Remember that while in EVALUATION MODE, a popup window dialog will be displayed in the "print server" machine each time a client device tries to print to it!.

To rid off that popup window dialog, you must by a license...


Useful? Share it!

Related Articles

  How to configure RAW printing mode in Windows
  How to configure RAW printing mode in Linux and Raspberry Pi
  How to configure RAW printing mode in macOS and OSX

Need help? Contact Support

We provide best-in-class customer service and support directly from members of our dev team! If we are available when you contact us, you will get a response in few minutes; otherwise the maximum turnaround is 24hs in most cases.