javascript 单击时在新窗口中打印图像的最简单方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5073363/
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
What's the simplest way to get an image to print in a new window when clicked?
提问by Joel Glovier
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?
我的问题是这是否可以仅通过 URL 参数或来自启动页面上的锚元素？或者我是否必须使用 javascript 构建目标页面才能执行此操作？
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.
显然上面的代码将在新窗口中打开图像，但仍需要用户按 Ctrl+P、Cmd+P 或使用浏览器命令。当用户单击链接时，我的客户希望图像“仅打印”，因此我试图找到最简单的方法来完成此操作。
So is there any parameters or attributes that I can add to the above markup to accomplish what I have described?
那么是否有任何参数或属性可以添加到上述标记中以完成我所描述的内容？
回答by Cody Bonney
You'll have to call window.print(). Perhaps something like this?
你必须调用window.print()。也许像这样？
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>
回答by Adrian
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.
如果完整的 url 包含图像扩展名，Cody Bonney 的回答在某些浏览器中将不起作用。新选项卡打开后，浏览器将自动下载它。你可以像这样解决这个问题。
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.srcthat is angular specific code. Everything else should work as long as you provide your own urlvalue from somewhere else
忽略scope.srcangular 特定的代码。只要您url从其他地方提供自己的价值，其他一切都应该有效
回答by Nathan Anderson
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/ readycall to window.print(). Link to that instead of the image directly, and keep the target="_blank"and you should be set.
我建议您使用您正在使用的任何语言或框架创建一个页面，该页面接受图像路径的查询字符串参数，在文档中输出该图像并具有onload/ready调用window.print(). 直接链接到那个而不是图像，并保留target="_blank"并且你应该被设置。
回答by Robby Pond
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.
您必须在 javascript 中调用window.print()来触发浏览器打印对话框。我很确定你不能在没有用户交互的情况下触发打印，除非你运行一个签名的小程序。
回答by rchiriboga
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.
嘿贾格。虽然这不完全是您想要做的，但我确实在一家网页设计公司工作时编写了本教程。您可能可以翻阅该代码以获取打印图像的链接。基本上这段代码做了什么它向fancybox jquery插件添加了一个打印按钮。我不明白为什么您不能只使用打印部分将其添加到您需要的任何内容中。希望能帮助到你。
