Using javascript to print images

javascript image popup printing

100,473

Solution 1

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.

Solution 2

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

Solution 3

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()" />

Solution 4

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

Solution 5

A cross browser solution printImage(document.getElementById('buzzBarcode').src)

/**
 * Prints an image by temporarily opening a popup
 * @param {string} src - image source to load
 * @returns {void}
 */
function printImage(src) {
    var win = window.open('about:blank', "_new");
    win.document.open();
    win.document.write([
        '<html>',
        '   <head>',
        '   </head>',
        '   <body onload="window.print()" onafterprint="window.close()">',
        '       <img src="' + src + '"/>',
        '   </body>',
        '</html>'
    ].join(''));
    win.document.close();
}

img {
  display: block;
  margin: 10px auto;
}

button {
  font-family: tahoma;
  font-size: 12px;
  padding: 6px;
  display: block;
  margin: 0 auto;
}

<img id="buzzBarcode" src="https://barcode.orcascan.com/qrcode/buzz.png?text=to infinity and beyond" width="150" height="150" />

View more solutions

100,473

Author by

andrew

Updated on March 13, 2021

Comments

andrew over 3 years

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?
andrew about 14 years

Cool. But what if I want a different image to show that initiates the popup window?
andrew about 14 years

How would this work using a button? The button would initiate this action, but actually prints a separate image.
Javier Parra about 14 years

I'm not going to write all the code for you, the point of this place is to learn. ;) You'd do it using the onmouseup event on the button: w3schools.com/jsref/event_onmouseup.asp
andrew about 14 years

I don't want you to write it for me... just want to be pointed to the right resources. I need a place to start. Thanks.
Mitch Dempsey about 14 years

Check out the CSS styles for printing. You can basically have an image hidden on the screen view, and then visible for the print view.
Igor Jerosimić about 10 years

Found fix for IE: before popup.print(); you need to call popup.focus();
Shasak over 8 years

why is there a 10 ms timeout? Why not simply <img onload='step2()'>
orellabac about 7 years

That codescratcher site is a little confusing I uploaded this code to my github account: See working demo here rawgit.com/orellabac/printFromJavascript/master/Print_Image.‌htm code is at: github.com/orellabac/printFromJavascript
Noel over 3 years

Brilliant solution. However it worked well using php server but when I moved to lighttpd it did not print the image alone but the page where it came from. Still looking for a solution to this.