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 certainty.

Can you create a webpage such that when you navigate to it, it engages the client-side printer and attempts to print a document. For instance, whenever you visit my personal website, you'll be treated to a print out of a picture of me, smiling.

Now, this is a hideous idea. I'm aware. But the discussion intrigued me as to if it could be done, and how. My friend insisted that the best you could do was pop up the print dialog for the user, they would have to click print themselves.

Would it be possible to bypass this step? Or just some fancy script to move the mouse over the print button and click on it? Or use an activeX control to interface with a Printer API directly?

You can send a print without showing a print dialog box. Unfortunately, this could only for IE. Hope this helps a bit: http://stackoverflow.com/questions/1096862/print-directly-from-browser-without-print-popup-window — Ramiz Uddin, Dec 14 '09 at 12:20

score 10 · Accepted Answer · answered Jun 03 '09 at 16:33

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() }

Is there any way for it to have to have two thumbs up as well? — DevinB, Jun 03 '09 at 16:36
No, browsers do not support printing pictures of two thumbs up (IE supports one thumb up) — TJ L, Jun 03 '09 at 16:40

score 7 · Answer 2 · answered Dec 11 '14 at 21:26

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!

score 4 · Answer 3 · answered Sep 21 '11 at 19:54

4

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.

answered Sep 21 '11 at 19:54

Jon

2,236
2
17
19

Not only is that really interesting, it shows that there's actually a business case for what I was asking about. Something which I had no idea about at the time. – DevinB Sep 22 '11 at 12:44

score 3 · Answer 4 · answered May 28 '15 at 18:27

As far as I know, there is no way to print a document directly, without some client intervention, like setting browser flags. In our current project we need to print directly to the default printer, but at least with Chrome you can do it easily with additional startup arguments.

To print directly to the OS default printer you can use:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --kiosk-printing http://www.contoso.com

Another option, which may also be useful, is tos use the native print dialog instead of chromes print preview.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --disable-print-preview http://www.contoso.com

Note, that window.print() and/or Ctrl-P behave accordingly the mentioned settings.

I know, that this does not exactly answers the OPs question, but I think it somewhat related, and for web based enterprise applications this is a quite common use case. Maybe someone find it useful.

For Firefox I recommend Seamless Print Addon

score 1 · Answer 5 · edited May 23 '17 at 10:31

1

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

edited May 23 '17 at 10:31

Community

1
1

answered Sep 27 '12 at 19:17

purefusion

943
1
15
23

score 1 · Answer 6 · answered Jul 05 '15 at 07:49

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

score 1 · Answer 7 · answered Jun 03 '09 at 16:30

1

You can't bypass the print dialog, as far as I know. That would be a pretty obvious security flaw if the browser allowed that. But you can bring up the print dialog with "window.print()".

answered Jun 03 '09 at 16:30

Rob H

14,502
8
42
45

3

Just because it 'would' be a security flaw, doesn't mean that it isn't already a security flaw. – DevinB Jun 03 '09 at 16:33
I've come across this requirement before. It was to print food orders automatically in a hot food delivery service from online orders. They just wanted the order to come out on paper and not have to be acknowledged. The new range of "cloud printers" that I am seeing recently also provides this business facility, but bypasses the browser. – Jason Jun 25 '12 at 10:01

score 1 · Answer 8 · answered Jun 03 '09 at 16:57

1

I think at best you would need an ActiveX component using base windows API to obtain a device context for the default printer and try and print an embedded image using assumed values for the printer settings.

answered Jun 03 '09 at 16:57

ChrisBD

9,104
3
22
35

score 0 · Answer 9 · answered May 26 '17 at 06:44

0

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

It works like charm.

answered May 26 '17 at 06:44

Josiah

118
10

Not an ideal answer. Please read the answering guidelines at https://stackoverflow.com/help/how-to-answer – Amit Phaltankar May 26 '17 at 07:17
Thanks @AmitP. I'll improve. – Josiah May 27 '17 at 17:27

Automatically Print Image from Website

9 Answers9

Linked

Related