Using javascript to print images

Question

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?

Raphaël Balet · Accepted Answer · 2023-06-29 07:40:30Z

34

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.

edited Jun 29, 2023 at 7:40

Raphaël Balet

9,0998 gold badges65 silver badges118 bronze badges

answered Aug 11, 2015 at 13:27

ricardo_escovar

4774 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shasak Over a year ago

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

orellabac Over a year ago

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

RixTheTyrunt Over a year ago

Updated:

function printImage(source) { 	var pwa = window.open(source, "_new") 	pwa.document.open() 	pwa.document.write("<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>") 	pwa.document.close() }

emre-ozgun Over a year ago

@RixTheTyrunt What if I have multiple images (N) to print ? How do I await every single one of them to load ? How to prepare them for print ?

RixTheTyrunt Over a year ago

Good question tho ツ

p.campbell · Accepted Answer · 2015-05-13 22:42:04Z

25

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

edited May 13, 2015 at 22:42

p.campbell

101k70 gold badges264 silver badges326 bronze badges

answered May 25, 2010 at 22:48

Javier Parra

2,1002 gold badges18 silver badges32 bronze badges

4 Comments

andrew Over a year ago

How would this work using a button? The button would initiate this action, but actually prints a separate image.

Javier Parra Over a year ago

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 Over a year ago

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.

Igor Jerosimić Over a year ago

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

Matthew F. Robben · Accepted Answer · 2012-11-06 15:50:05Z

10

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

edited Nov 6, 2012 at 15:50

Matthew F. Robben

2,1241 gold badge13 silver badges6 bronze badges

answered Sep 4, 2012 at 3:21

Zahid Habib

7153 gold badges12 silver badges23 bronze badges

2 Comments

Noel Over a year ago

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.

Yetti99 Over a year ago

Instead of window.print() should it be pwin.print() ?

user12133161 · Accepted Answer · 2019-09-28 00:06:38Z

8

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

answered Sep 28, 2019 at 0:06

user12133161

811 silver badge1 bronze badge

1 Comment

Pier-Luc Gendreau Over a year ago

I had to add style="margin: 0" on the body tag to avoid having an empty first page when printing.

Igor Jerosimić · Accepted Answer · 2014-06-04 09:02:43Z

5

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

answered Jun 4, 2014 at 9:02

Igor Jerosimić

13.7k7 gold badges47 silver badges55 bronze badges

Comments

Mitch Dempsey · Accepted Answer · 2010-05-25 22:44:52Z

1

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)

answered May 25, 2010 at 22:44

Mitch Dempsey

40.3k6 gold badges72 silver badges75 bronze badges

2 Comments

andrew Over a year ago

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

Mitch Dempsey Over a year ago

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.

DD. · Accepted Answer · 2014-04-30 18:20:54Z

0

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>

answered Apr 30, 2014 at 18:20

DD.

22.1k54 gold badges164 silver badges252 bronze badges

Comments

Tomasz Jakub Rup · Accepted Answer · 2015-12-02 19:04:08Z

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.

Gorodscy Fernando · Accepted Answer · 2018-06-15 16:08:01Z

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)

Collectives™ on Stack Overflow

Using javascript to print images

9 Answers 9

5 Comments

4 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

4 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related