All geek questions in one place

What is the easiest way to get the image to print in a new window when clicked?

I am trying to create a simple click to print a link for an image, and what I would like to do is when I click the link, a new window with the image will open, and the browser will open the print box dialog box.

My question is, is this possible only from the URL parameter or from the anchor element on the start page? Or do I need to create a landing page using javascript?

Here is an example of what I have:

<p class="click-2-print"> <a href="/img/map.jpg" target="_blank">Click here to print the map above</a> </p>

Obviously, the above code will open the image in a new window, but for this the user will need to press Ctrl + P, Cmd + P or use the browser commands. My client wants the image to “just print” when the user clicks on the link, so I'm trying to find the easiest way to accomplish this.

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

+4
source share
5 answers

You will need 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 place the image on a page that tells the browser to print at startup. For instance...

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

I would recommend that you create a page in any language or framework that you are working in that takes a request argument for the image path, displays this image in the document and has onload / ready on window.print() , a link to this instead of the image directly and save target="_blank" and you should be set.

+2
source

You must call window.print () in javascript to launch the browser print dialog. I am sure that you cannot start printing without user interaction if you did not run the signed applet.

+1
source

Hey Jag. Although this is not exactly what you want to do, I wrote this tutorial when I was working in a web design firm. You can probably dig this code to get a link that prints the image. Basically what this code does, it adds a print button to the fancybox jquery plugin. I do not understand why you could not use the printed part to add it to what you need. Hope it helps.

Add printable fancybox jquery plugin

0
source

Cody Bonnie's answer will not work in some browsers if the full URL includes an image extension. The browser will automatically download it as soon as a new tab opens. You can get around this.

  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 on the original tab.

Do not consider scope.src , namely angular specific code. Everything else should work as long as you provide your own url value from another place

0
source

Source: https://habr.com/ru/post/1340724/

More articles:


All Articles