Javascript 使用javascript打印图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2909033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using javascript to print images
提问by andrew
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.
我想知道是否可以使用 javascript 打开包含图像的弹出窗口，同时显示打印对话框。一旦有人点击打印，弹出窗口就会关闭。
Is this easily attainable?
这容易实现吗？
回答by Javier Parra
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
回答by ricardo_escovar
Another great solution!! All credit goes to Codescratcher
另一个很好的解决方案！！所有功劳归于 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.
请参阅此处的完整示例。
回答by Zahid Habib
Use this in the head block
在 head 块中使用它
<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
在 body 块中使用它
<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image" onclick="printImg()" />
回答by Igor Jerosimi?
This code will open YOUR_IMAGE_URL in a popup window, show print dialog and close popup window after print.
此代码将在弹出窗口中打开 YOUR_IMAGE_URL，显示打印对话框并在打印后关闭弹出窗口。
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();
回答by user12133161
A cross browser solution printImage(document.getElementById('buzzBarcode').src)
跨浏览器解决方案 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" />回答by Mitch Dempsey
Yea, just put the image on the screen, and then call window.print();in javascript and it should popup.
是的，只需将图像放在屏幕上，然后调用window.print();javascript，它就会弹出。
(This is how Google Maps/Google Calendar do printing)
（这是谷歌地图/谷歌日历打印的方式）
回答by DD.
This works in Chrome:
这适用于 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>
回答by Kickass
I just spent 45 minutes on this "SIMPLE" problem, trying to get it the way I wanted it to operate.
我只是在这个“简单”问题上花了 45 分钟，试图让它按照我想要的方式运行。
I had an image inside an img tag, dynamically generated by a jQuery Barcodeplugin 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 Gridplugin, inside a jQuery-UIdialog along with jQuery-UIdialog extender applied to it.
我在 img 标签中有一个图像，它是由jQuery Barcode我必须打印的插件动态生成的。我希望它在另一个窗口中打印，然后关闭窗口。这一切都应该发生在用户单击jQuery Grid插件内的按钮后，在jQuery-UI对话框内以及jQuery-UI应用到它的对话框扩展程序中。
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 setTimeoutis not just for shits and giggles, it's the only way I found Firefox 42would 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.
这setTimeout不仅仅是为了拉屎和咯咯笑，这是我发现的唯一Firefox 42可以达到这些功能的方法。它只是简单地跳过.close()函数，直到我向它添加断点，然后它就完美地工作了。所以我假设它在应用 onbeforeload 事件函数和 onafterprint 事件函数或其他东西之前创建了这些窗口实例。
回答by Gorodscy Fernando
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:
或者，如果您更喜欢 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)
此函数可确保主体上的元素被隐藏且不会重新绘制到 DOM 中。它还确保在调用print之前加载图像（如果图像太大并且互联网连接速度慢，加载img可能需要一段时间，如果你调用print太快，它会打印一个空页）
