What's the simplest way to get an image to pri

2019-05-08 02:02发布

站内问答 / JavaScript
1323 5 4

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?

5条回答
我只想做你的唯一
2楼-- · 2019-05-08 02:35

Hey Jag. Although its not exactly what you are looking to do, I did write this tutorial while I was working at a web design firm. You can probably rummage that code to get the link that prints the image. Basically what this code does it add a print button to the fancybox jquery plugin. I dont see why you couldnt just use the print part to add it to whatever you need. Hope it helps.

Add print ability to fancybox jquery plugin

查看更多
0人赞 添加讨论(0) 举报
淡お忘
3楼-- · 2019-05-08 02:41

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>
查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
4楼-- · 2019-05-08 02:51

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.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
5楼-- · 2019-05-08 02:53

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.

查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
6楼-- · 2019-05-08 02:59

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)