Javascript print directly to default printer

Product JSPrintManager Published 06/25/2019 Updated 12/11/2019 Author

Overview

In this walkthrough, you'll learn how to print HTML content from Javascript directly to the client printer without displaying a print dialog i.e. very silently. You'll be able to print HTML content to the Default client printer as well as to any other installed printer at the client machine. This solution works with any browser on Windows OS like IE, Edge, Chrome, Firefox, Opera & Safari as well as on Linux, Raspberry Pi & Mac systems!

The HTML content that we'll print is a simple business card made by pure HTML and CSS markup containing an image. The HTML Card looks like follows:

John Doe

Architect & Engineer

The HTML printing is performed by following these tasks:

• Step 1 The HTML content that needs to be printed is converted to a PNG image by leveraging html2canvas utility from pure Javascript code.

  IMPORTANT! html2canvas is not supported by all browsers. Please refer to Browser Compatibility topic.

  NOTE: It's important that you specify inline style instead of CSS classes to specifying things like Font Family as well as is a good idea to use Data URI to display images in PNG or JPEG formats.

• Step 2 Once the HTML content was rendered to a PNG image by using html2canvas, we'll invoke JSPrintManager App for starting the printing process.

Follow up these steps

• Be sure you install in your dev machine JSPrintManager [JSPM] [Available for Windows, Linux, Raspberry Pi & Mac]
  This small app must be installed on each client that will print from your website!
• 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

  
  
      
  Print HTML Card from Javascript
      
  This card is 300px x 400px ⇔ 3.125in x 4.17in [300/96 and 400/96 respectivelly]
  
    
  
  
      
  
  	    
  	    
  
  		    
  John Doe
  		    
  Architect & Engineer
  	    
      
      
      
           Print to Default printer
      
      
  or...
      
  
          Select an installed Printer:
          
      
      
  
  
      Print Now...
  
                              

  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 Code

  
  
  
      //WebSocket settings
      JSPM.JSPrintManager.auto_reconnect = true;
      JSPM.JSPrintManager.start[];
      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 += '' + myPrinters[i] + '';
  				}
                  $['#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! Download JSPM Client App from //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[]] {
              //generate an image of HTML content through html2canvas utility
              html2canvas[document.getElementById['card'], { scale: 5 }].then[function [canvas] {
  
                  //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... 
                  var b64Prefix = "data:image/png;base64,";
                  var imgBase64DataUri = canvas.toDataURL["image/png"];
                  var imgBase64Content = imgBase64DataUri.substring[b64Prefix.length, imgBase64DataUri.length];
  
                  var myImageFile = new JSPM.PrintFile[imgBase64Content, JSPM.FileSourceType.Base64, 'myFileToPrint.png', 1];
                  //add file to print job
                  cpj.files.push[myImageFile];
  
                  //Send print job to printer!
                  cpj.sendToClient[];
  
  
              }];
          }
      }
  
  
  

• That's it! Run your website and test it. Click on Print Now... to print the HTML/CSS Card without print dialog. You can print it to the Default client printer or you can get a list of the installed printers available at the client machine.

Try JSPrintManager Online Demo!

How do I directly print from my browser?

Can I set the window print settings with JavaScript?

How do I allow my printer to print directly?

How do I set my printer to print automatically?