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

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)

The following figure shows the printing scenario:

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!

Step-by-step

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".
• Now, depeding on what type of WebSocket communication you want to use...

  • Using WebSockets over SSL/TLS communication (WSS)

    • 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.

      • For Version 5.0 or newer
        Click on the JSPrintManager App icon in the system tray and select Settings..., then click on Security Certificate tab. Edit the SAN list and when done, click on Generate Server Certificate...

      The specified domains and/or IPs in the SAN list are now protected by the new certificate which must be deployed to the client systems/devices.

  • Using Insecure WebSockets communication (WS)

    • On the JSPrintManager App, you must explicitly disable the SSL option by opening the Settings dialog, then click on Advanced Options, then uncheck the Use Secure Sockets Layer (SSL) and finally click on Apply button.
      
      
• 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 code snippets:

  HTML Code

  
  <div style="text-align:center">
      <h1>Print PDF file from iOS & Android devices</h1>
      <hr />
      <label for="printerType">Client printer:</label>
      <select id="printerType" onchange="showPrinterSettings();">
          <option value="0">Default printer</option>
          <option value="1">Let the user select it (OS print dialog)</option>
          <option value="2" selected>Installed printer</option>
      </select>
      <div id="printer-settings-2" class="printer-settings">
          <label>Installed printer: <select id="installedPrinterName"></select></label>
      </div>
      <br /><br />
      <button type="button" onclick="doPrinting();">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 then add the following script references to your page.
  
  

  
  <!-- JSPrintManager.js (download it or install it with: npm install jsprintmanager) -->
  <script src="JSPrintManager.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

  If using Insecure WebSockets communication (WS), then specify the first param of the start() func as false in the source code below.

  In the code below, a test pdf file from 'https://neodynamic.com/temp/LoremIpsum.pdf' will be printed. Of course, you can change it 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>
      // Start the connection with the JSPrintManager Client App
      JSPM.JSPrintManager.auto_reconnect = true;
      // Connect to the "print server" machine: start(useSSL, printServerIP, port)
      // Use false as the first param if you disabled SSL (WS) in the print server JSPrintManager App
      JSPM.JSPrintManager.start(true, '10.0.0.1', 29443);
      JSPM.JSPrintManager.WS.onStatusChanged = function () {
          if (jspmWSStatus()) {
              // get the client installed printers
              JSPM.JSPrintManager.getPrinters().then(function (printersList) {
                  fillSelect('installedPrinterName', printersList);
              });
          }
      };
  
      // Do printing...
      function doPrinting() {
          if (jspmWSStatus()) {
              // Create a ClientPrintJob
              var cpj = new JSPM.ClientPrintJob();
              // Set a printer available at the "print server" machine
              cpj.clientPrinter = getClientPrinter();
              // Set the content to print... in this sample, a PDF file
              var myPdfFile = new JSPM.PrintFilePDF('https://neodynamic.com/temp/LoremIpsum.pdf', JSPM.FileSourceType.ExternalURL, 'myFileToPrint.pdf', 1);
              cpj.files.push(myPdfFile);
              // Trace the print job status (optional)
              traceJob(cpj);
              // Send the print job to the print server
              cpj.sendToClient();
          }
      }
  
      // Check the connection status with the JSPrintManager Client App
      function jspmWSStatus() {
          var status = JSPM.JSPrintManager.websocket_status;
          if (status == JSPM.WSStatus.Open) {
              return true;
          } else if (status == JSPM.WSStatus.WaitingForUserResponse) {
              console.info('Waiting for the user to allow this website (JSPrintManager dialog or browser Local Network Access prompt)...');
          } else if (status == JSPM.WSStatus.Blocked) {
              alert('JSPrintManager has blocked this website!');
          } else if (status == JSPM.WSStatus.NotInstalled || status == JSPM.WSStatus.Closed) {
              alert('JSPrintManager Client App is not installed or not running! Download it from https://neodynamic.com/downloads/jspm');
          } else if (status == JSPM.WSStatus.CertificateError) {
              alert('A TLS/SSL certificate error prevented the connection with JSPrintManager Client App.');
          } else if (status == JSPM.WSStatus.ConnectionError) {
              alert('A network error (e.g. a firewall) prevented the connection with JSPrintManager Client App.');
          }
          return false;
      }
  
      // Show the settings of the selected printer type
      function showPrinterSettings() {
          document.getElementById('printer-settings-2').style.display = (val('printerType') == '2') ? '' : 'none';
      }
  
      // Create the client printer for the selected printer type
      // (files are rendered by the OS print system, so only these printer types apply)
      function getClientPrinter() {
          switch (val('printerType')) {
              case '0': return new JSPM.DefaultPrinter();
              case '1': return new JSPM.UserSelectedPrinter();
              case '2': return new JSPM.InstalledPrinter(val('installedPrinterName'));
          }
      }
  
      // Log the print job status updates (optional)
      function traceJob(cpj) {
          cpj.onUpdated = function (data) { console.info(data); };
          cpj.onFinished = function (data) { console.info(data); };
          cpj.onError = function (data, isCritical) { console.error(data); };
      }
  
      // Helpers
      function val(id) { return document.getElementById(id).value; }
      function checked(id) { return document.getElementById(id).checked; }
  
      // Fill a <select> element with a list of items
      function fillSelect(id, items, getText) {
          var select = document.getElementById(id);
          select.innerHTML = '';
          for (var i = 0; i < items.length; i++) {
              var text = getText ? getText(items[i]) : items[i];
              select.add(new Option(text, text));
          }
      }
  </script>
  

• That's it! This simple website with just one page is ready to be tested from any mobile devices.
  
  If you use WebSockets over SSL/TLS communication (WSS), then 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

Only if you use WebSockets over SSL/TLS communication (WSS)

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:

• For iOS 10.3+ please refer to https://support.apple.com/en-us/HT204477
• For Android please refer to https://support.google.com/nexus/answer/2844832?hl=en

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