Automatically Print Image from Website

Question

A coworker and I were having a discussion about what is and isn\'t possible within the browser.

Then a question came up that neither of us could answer with certaint

Answer 1

From lot of search from last few days, I've found a best possible solution. Till date Chrome do not support direct printing from javascript. It has launched USB and serial API which might help.

But currently I'm using a JavaApplet solution which is open source. https://github.com/qzind/qz-print - build While I'm getting error in building it. I preferred a Prebuilt - QZ Print Plugin 1.9.3 desktop app, which works great.

Download it from here: https://qz.io/download/

Code Example:

/***************************************************************************
 * Prototype function for printing an HTML screenshot of the existing page
 * Usage: (identical to appendImage(), but uses html2canvas for png rendering)
 *    qz.setPaperSize("8.5in", "11.0in");  // US Letter
 *    qz.setAutoSize(true);
 *    qz.appendImage($("canvas")[0].toDataURL('image/png'));
 ***************************************************************************/
function printHTML5Page() {
    $("#qz-status").html2canvas({
        canvas: hidden_screenshot,
        onrendered: function() {
            if (notReady()) { return; }
            // Optional, set up custom page size.  These only work for PostScript printing.
            // setPaperSize() must be called before setAutoSize(), setOrientation(), etc.
            qz.setPaperSize("8.5in", "11.0in");  // US Letter
            qz.setAutoSize(true);
            qz.appendImage($("canvas")[0].toDataURL('image/png'));

            //qz.setCopies(3);
            qz.setCopies(parseInt(document.getElementById("copies").value));

            // Automatically gets called when "qz.appendFile()" is finished.
            window['qzDoneAppending'] = function() {
                // Tell the applet to print.
                qz.printPS();

                // Remove reference to this function
                window['qzDoneAppending'] = null;
            };
        }
    });
}

Complete example can be found here: https://gist.github.com/bkrajendra/c80de17b627e59287f7c

Answer 2

You have to prompt the user to print the current page, there's no way to bypass this step (possibly in activeX for IE). That said, there's two different ways you could prompt the user to print images of you smiling when the page is loaded.

Here's how to do it in JavaScript.

window.onload = function() {
  var img = window.open("me-smiling.png");
  img.print();
}

And here's how to do it in css/javascript/html (assuming your picture has the id 'me-smiling'): CSS:

@media print {
   * {
     display:none;
   }
   img#me-smiling {
     display:block;
   }
}

Javascript:

 window.onload = function() { window.print() }

Answer 3

This is the best solution that I have found for firefox: There is this awesome add-on Seamless Print.

It works like charm.

Answer 4

The only solution to avoid print dialog that I found was creating a variable on Mozilla Firefox to set auto-print. Maybe is not the best solution if you need to use other browser, but in my case, I only need to print a report automatically and it works:

1- Open Firefox and type "about:config" in the address bar
2- Right click on any preference and select "New" > "Boolean"
3- Add a variable called "print.always_print_silent" with "true" value
4- Restart Firefox.

Hope help you!

Answer 5

AttendStar created a free add-on that suppresses the dialog box and removes all headers and footers for most versions of Firefox.

https://addons.mozilla.org/en-US/firefox/addon/attendprint/

With that feature on you can use $('img').jqprint(); and jqprint for jquery will only print that image automatically called from your web application.

Answer 6

To print to the default printer automatically without seeing a print dialog prompt, I've shared some code in the following question that works in IE7, IE8 and IE9:

Bypass Printdialog in IE9