What's the simplest way to get an image to print in a new window when clicked?

javascript url browser printing popupwindow

18,647

Solution 1

You'll have to call window.print(). Perhaps something like this?

function printimage(){
    var URL = "http://myimage.jpg";

    var W = window.open(URL);

    W.window.print();
}

Another option may be to put the image on a page that tells the browser to print when loaded. For example...

<body onload="window.print();">
<img src="/img/map.jpg">
</body>

Solution 2

Cody Bonney's answer will not work in certain browsers if the full url includes the image extension. The browser will automatically download it as soon as the new tab opens. You can get around this like so.

                    var url = scope.src;
                    var w = window.open('', '');
                    w.document.write('<html><head>');
                    w.document.write('</head><body >');
                    w.document.write('<img id="print-image-element" src="'+url+'"/>');
                    w.document.write('<script>var img = document.getElementById("print-image-element"); img.addEventListener("load",function(){ window.focus(); window.print(); window.document.close(); window.close(); }); </script>');
                    w.document.write('</body></html>');
                    w.window.print();

This will open a new page with the image, prompt the user to print, and after printing, close the new tab and reset focus to the original tab.

Disregard the scope.src that is angular specific code. Everything else should work as long as you provide your own url value from somewhere else

Solution 3

I would recommend you create a page in whatever language or framework you are working in that accepts a querystring argument for the image path, output that image in the document and have an onload / ready call to window.print(). Link to that instead of the image directly, and keep the target="_blank" and you should be set.

Solution 4

You have to call window.print() in javascript to trigger the browser print dialog. I'm pretty sure you can't trigger a print without user interaction unless you run a signed applet.

View more solutions

18,647

Author by

Joel Glovier

I'm a product designer at Apollo GraphQL. I live in the Pacific Northwest of the US, I like to draw, write, paint, code, hike, skateboard, and play games with my family. Feel free to say hi!

Updated on June 18, 2022

Comments

Joel Glovier almost 2 years
I'm trying to create a simple click to print link for an image, and what I'd like to happen is when the link is clicked, a new window opens with the image, and the browser opens the print command dialogue box.

My question is whether this is possible just from a URL parameter, or from the anchor element on the initiating page? Or do I have to build a target page with javascript to do this?

Here's a sample of what I've got:
```
<p class="click-2-print">
  <a href="/img/map.jpg" target="_blank">Click here to print the map above</a>
</p>
```
Obviously the code above will open the image in a new window, but still requires to user to hit Ctrl+P, Cmd+P or use the browser commands. My client wants the image to "just print" when the user clicks the link, so I'm trying to find the simplest way to accomplish this.

So is there any parameters or attributes that I can add to the above markup to accomplish what I have described?