Using javascript to print images

I would like to know if it's possible to use javascript to open a popup window containing an image, and at the same time have the print dialog show. Once someone clicks on print, the popup closes.

Is this easily attainable?

Javier Parra

popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();

ricardo_escovar

Another great solution!! All credit goes to Codescratcher

<script>

    function ImagetoPrint(source)
    {
        return "<html><head><scri"+"pt>function step1(){\n" +
                "setTimeout('step2()', 10);}\n" +
                "function step2(){window.print();window.close()}\n" +
                "</scri" + "pt></head><body onload='step1()'>\n" +
                "<img src='" + source + "' /></body></html>";
    }

    function PrintImage(source)
    {
        var Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImagetoPrint(source));
        pwa.document.close();
    }

</script>

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

See the full example here.

Zahid Habib

Use this in the head block

<script type="text/javascript">
function printImg() {
  pwin = window.open(document.getElementById("mainImg").src,"_blank");
  pwin.onload = function () {window.print();}
}
</script>

use this in the body block

<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image"  onclick="printImg()" />

This code will open YOUR_IMAGE_URL in a popup window, show print dialog and close popup window after print.

var popup;

function closePrint () {
    if ( popup ) {
        popup.close();
    }
}

popup = window.open( YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE
popup.print();

MDN Reference code

Yea, just put the image on the screen, and then call window.print(); in javascript and it should popup.

(This is how Google Maps/Google Calendar do printing)

This works in Chrome:

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 1);
                };
            </script>
    </body>

Kickass

I just spent 45 minutes on this "SIMPLE" problem, trying to get it the way I wanted it to operate.

I had an image inside an img tag, dynamically generated by a jQuery Barcode plugin that I had to print. I wanted it to print in another window and afterwards close the window. This was all supposed to happen after the user clicked a button inside a jQuery Grid plugin, inside a jQuery-UI dialog along with jQuery-UI dialog extender applied to it.

I adjusted everyone answers till I finally came up with this, maybe it can help someone.

w = window.open(document.getElementById("UB-canvas").src);
w.onload = function () { w.print(); }
w.onbeforeunload = setTimeout(function () { w.close(); },500);
w.onafterprint = setTimeout(function () { w.close(); },500);

The setTimeout is not just for shits and giggles, it's the only way I found Firefox 42 would hit those functions. It would just simply skip the .close() functions until I added a breakpoint to it, then it worked perfectly. So I'm assuming it created those window instances before it could apply the onbeforeload event function and onafterprint event functions, or something.

I wrote a coffee script function that does that (but without opening a new window):

@print_img = (url) ->
$children = $('body').children().hide()
$img = $('<img>', src: url)
$img.appendTo('body')

$img.on 'load', ->
  window.print()
  $(this).remove()
  $children.show()

Or if you prefer in javascript:

this.print_img = function(url) {
  var $children, $img;
  $children = $('body').children().hide();
  $img = $('<img>', {
    src: url
  });
  $img.appendTo('body');

  $img.on('load', function() {
    window.print();
    $(this).remove();
    $children.show();
  });
};

This function makes sure that the elements on the body are hidden and not redrawn into the DOM. It also makes sure that the image is loaded before calling print (if the image is too large and the internet connection is slow, it may take a while to load the img, if you call print too soon, it will print an empty page)

来源：https://stackoverflow.com/questions/2909033/using-javascript-to-print-images

标签

javascript

image

popup

printing