Advanced Silent Multipage TIF Printing with Tray, Paper Size, Rotation, Duplex & Pages Range Settings from Javascript
Product JSPrintManager Published 06/28/2021 Updated 06/28/2021 Author Neodynamic
Overview
In this walkthrough, you'll learn how to silently print Multipage TIF files from Javascript directly to the client printer without displaying a print dialog. You'll be able to print TIF files to the Default client printer as well as to any other installed printer at the client machine with advanced settings like Tray Name, Paper Size, Print Rotation, Duplex, Pages Range and more! 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!
Try JSPrintManager Online Demo!
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
<div style="text-align:center"> <h1>Advanced TIF Printing from Javascript</h1> <hr /> <div> <div> <label for="txtTifFile">TIF File URL:</label> <input type="text" name="txtTifFile" id="txtTifFile" value="https://neodynamic.com/temp/patent2pages.tif" /> </div> <div> <label for="lstPrinters">Printers:</label> <select name="lstPrinters" id="lstPrinters" onchange="showSelectedPrinterInfo();" ></select> </div> <div> <label for="lstPrinterTrays">Supported Trays:</label> <select name="lstPrinterTrays" id="lstPrinterTrays" ></select> </div> <div> <label for="lstPrinterPapers">Supported Papers:</label> <select name="lstPrinterPapers" id="lstPrinterPapers" ></select> </div> <div> <label for="lstPrintRotation">Print Rotation (Clockwise):</label> <select name="lstPrintRotation" id="lstPrintRotation" > <option>None</option> <option>Rot90</option> <option>Rot180</option> <option>Rot270</option> </select> </div> </div> <div> <div> <label for="txtPagesRange">Pages Range: [e.g. 1,2,3,10-15]</label> <input type="text" id="txtPagesRange"> </div> <div> <div > <label><input id="chkPrintInReverseOrder" type="checkbox" value="">Print In Reverse Order?</label> </div> </div> <div> <div > <label><input id="chkPrintAnnotations" type="checkbox" value="">Print Annotations? <span><em>Windows Only</em></span></label> </div> </div> <div> <div > <label><input id="chkPrintAsGrayscale" type="checkbox" value="">Print As Grayscale? <span><em>Windows Only</em></span></label> </div> </div> <div> <div > <label><input id="chkDuplex" type="checkbox" value="">Duplex?</label> </div> </div> </div> <hr /> <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
- Copy & paste the following script code into your page file:
<script> var clientPrinters = null; var _this = this; //WebSocket settings JSPM.JSPrintManager.auto_reconnect = true; JSPM.JSPrintManager.start(); JSPM.JSPrintManager.WS.onStatusChanged = function () { if (jspmWSStatus()) { //get client installed printers JSPM.JSPrintManager.getPrintersInfo().then(function (printersList) { clientPrinters = printersList; var options = ''; for (var i = 0; i < clientPrinters.length; i++) { options += '<option>' + clientPrinters[i].name + '</option>'; } $('#lstPrinters').html(options); _this.showSelectedPrinterInfo(); }); } }; //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 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() { if (jspmWSStatus()) { //Create a ClientPrintJob var cpj = new JSPM.ClientPrintJob(); //Set Printer info var myPrinter = new JSPM.InstalledPrinter($('#lstPrinters').val()); myPrinter.paperName = $('#lstPrinterPapers').val(); myPrinter.trayName = $('#lstPrinterTrays').val(); if ($('#chkDuplex').prop('checked')) myPrinter.duplex = JSPM.DuplexMode.Default; cpj.clientPrinter = myPrinter; //Set TIF file var my_file = new JSPM.PrintFileTIF($('#txtTifFile').val(), JSPM.FileSourceType.URL, 'MyFile.tif', 1); my_file.printRotation = JSPM.PrintRotation[$('#lstPrintRotation').val()]; my_file.printRange = $('#txtPagesRange').val(); my_file.printAnnotations = $('#chkPrintAnnotations').prop('checked'); my_file.printAsGrayscale = $('#chkPrintAsGrayscale').prop('checked'); my_file.printInReverseOrder = $('#chkPrintInReverseOrder').prop('checked'); cpj.files.push(my_file); //Send print job to printer! cpj.sendToClient(); } } function showSelectedPrinterInfo() { // get selected printer index var idx = $("#lstPrinters")[0].selectedIndex; // get supported trays var options = ''; for (var i = 0; i < clientPrinters[idx].trays.length; i++) { options += '<option>' + clientPrinters[idx].trays[i] + '</option>'; } $('#lstPrinterTrays').html(options); // get supported papers options = ''; for (var i = 0; i < clientPrinters[idx].papers.length; i++) { options += '<option>' + clientPrinters[idx].papers[i] + '</option>'; } $('#lstPrinterPapers').html(options); } </script> - That's it! Run your website and test it. Click on Print Now... to print the TIF file without print dialog with the specified settings and silently.