Print HTML from Javascript directly to the client printer without print dialog or silent mode

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

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.

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)
 
 10px 10px 0 0;"> 
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