Silent JPG & PNG Images Printing with custom Location, Size & Page Orientation Settings from Javascript

Product JSPrintManager Published 05/20/2020 Updated 05/20/2020 Author

Overview

In this walkthrough, you'll learn how to silently print JPG & PNG images from any web page (written on top of any Web Platform including ASP.NET MVC/CORE, PHP, Django, Ruby On Rails (RoR), Express.js, Angular, React, Vue) directly to the client printer without displaying any print dialog and by writing pure Javascript code. You'll be able to print JPG & PNG files to the Default client printer as well as to any other installed printer at the client machine with advanced settings like custom location, size & print orientation

JSPrintManager allows you to specify the X, Y position/location, the Print Width & Height, as well as the Print Orientation values right into the File Name of the JPG/PNG image you want to print by using the following parameters:

PARAMETER NAME DESCRIPTION SAMPLE
PX It's the X print position (left to right) in INCH unit PX=0.1
PY It's the Y print position (top to bottom) in INCH unit PY=0.1
PW It's the Print Width in INCH unit PW=3.5
PH It's the Print Height in INCH unit PH=2.25
PO It's the Print Orientation, 'P' for Postrait and 'L' for Landscape PO=P

So supposing you want to print a jpg image file available at this URL https://neodynamic.com/temp/penguins300dpi.jpg and you want to print it at X,Y 0.1in, in a 4.25in x 3.50in size, then the PrintFile instantiation should be written as follows:

var my_file = new JSPM.PrintFile("https://neodynamic.com/temp/penguins300dpi.jpg", JSPM.FileSourceType.URL, "MyPicture-PX=0.1-PY=0.1-PW=4.25-PH=3.50-PO=P.jpg", 1);

Try reproducing the following sample code locally...

Try JSPrintManager Online Demo!

Follow up these steps

  • JSPrintManager Client App

    Be sure you install in your dev machine JSPrintManager (JSPM) (Available for Windows, Linux, Raspberry Pi & Mac)

    IMPORTANT: This small app must be installed on each client!

  • HTML & Script References

    • Download JSPrintManager.js
    • Copy all of these *.js files to the same folder where the next index.html page sample will be located in.
    • By using your favorite Web Development IDE or Text Editor, create a new HTML file naming it index.html
      Copy/paste the following code inside that html file:

      
<!XLSTYPE html>
<html>

<head>
    <title>JSPrintManager</title>
    <meta charset="utf-8" />

</head>

<body>

    <div style="text-align:center">
        <h1>Advanced Image Printing from Javascript</h1>
        <hr />
        <fieldset>
            <legend><strong>Image File to print</strong></legend>

            <label>
                Local Image file:
                <input id="input-local-img-file" type="file" />
            </label>
            <br /><br />
            <strong>OR...</strong>
            <br /><br />
            <label>
                Image File from URL
                <span>
                    (e.g.
                    <a href="https://neodynamic.com/temp/penguins300dpi.jpg" target="_blank">
                        https://neodynamic.com/temp/penguins300dpi.jpg
                    </a>)
                </span>
                <input id="input-file-url" />
            </label>
        </fieldset>
        <br /><br />
        <fieldset>
            <legend><strong>Target Printer</strong></legend>
            <label>Printer:</label>
            <select id="printerName">
            </select>
        </fieldset>
        <br /><br />
        <fieldset>
            <legend><strong>Custom Image Printing Settings</strong></legend>
            <label>Print X Pos (INCH unit):</label>
            <input type="text" id="printX" />
            <label>Print Y Pos (INCH unit):</label>
            <input type="text" id="printY" />
            <label>Print Width (INCH unit):</label>
            <input type="text" id="printW" />
            <label>Print Height (INCH unit):</label>
            <input type="text" id="printH" />
            <label>Print Orientation:</label>
            <select id="printO">
                <option value="P" selected>Portrait</option>
                <option value="L">Landscape</option>
            </select>
        </fieldset>
        <br />
        <button onclick="doPrinting();"><h2>Print Image Now...</h2></button>

    </div>

    <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 src="JSPrintManager.js"></script>
    
    
    

    <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.getPrinters().then(function (printersList) {
                    clientPrinters = printersList;
                    var options = '';
                    for (var i = 0; i < clientPrinters.length; i++) {
                        options += '<option>' + clientPrinters[i] + '</option>';
                    }
                    $('#printerName').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) {
                console.warn('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 doPrinting() {
            if (jspmWSStatus()) {

                //create ClientPrintJob
                var cpj = new JSPM.ClientPrintJob();

                //Set Printer info
                var myPrinter = new JSPM.InstalledPrinter($('#printerName').val());
                cpj.clientPrinter = myPrinter;

                //create image printing settings...
                var print_settings = '';
                if (parseFloat($('#printX').val())) print_settings += '-PX=' + parseFloat($('#printX').val()).toString();
                if (parseFloat($('#printY').val())) print_settings += '-PY=' + parseFloat($('#printY').val()).toString();
                if (parseFloat($('#printW').val())) print_settings += '-PW=' + parseFloat($('#printW').val()).toString();
                if (parseFloat($('#printH').val())) print_settings += '-PH=' + parseFloat($('#printH').val()).toString();
                print_settings += '-PO=' + $('#printO').val();

                //Set Image file
                var local_file = $("#input-local-img-file").prop('files');
                var my_file = null;
                var file_name;
                var file_ext;

                if (local_file && local_file.length > 0) {
                    file_ext = local_file[0].name.substring(local_file[0].name.lastIndexOf('.'));
                    file_name = local_file[0].name.substring(0, local_file[0].name.lastIndexOf('.'));
                    file_name += print_settings + file_ext;

                    my_file = new JSPM.PrintFile(local_file[0], JSPM.FileSourceType.BLOB, file_name, 1);
                } else if ($("#input-file-url").val().length > 0) {
                    var file_url = $("#input-file-url").val();
                    file_ext = file_url.substring(file_url.lastIndexOf('.'));
                    file_name = file_url.substring(file_url.lastIndexOf('/') + 1, file_url.lastIndexOf('.'));
                    file_name += print_settings + file_ext;

                    my_file = new JSPM.PrintFile($("#input-file-url").val(), JSPM.FileSourceType.URL, file_name, 1);
                } else {
                    alert('Must specify a local file or a URL!');
                    return;
                }

                //add file to ClientPrintJob
                cpj.files.push(my_file);

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

            }
        }



    </script>
</body>

</html>

  • That's it! Run your website and test it.
Try JSPrintManager Online Demo!


Useful? Share it!

Related Articles

  Advanced Silent PDF Printing with Tray, Paper Size, Rotation & Pages Range Settings from Javascript
  Silent Word DOC Printing with Duplex, Reverse & Pages Range Settings from Javascript

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.