单击时在新窗口中打印图像的最简单方法是什么？
[英]What's the simplest way to get an image to print in a new window when clicked?
问题描述
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? 我的问题是，这是可以从URL参数，还是从发起页面上的锚元素？ Or do I have to build a target page with javascript to do this? 或者我是否必须使用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. 显然，上面的代码将在新窗口中打开图像，但仍然需要用户按Ctrl + P，Cmd + P或使用浏览器命令。 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 个解决方案
解决方案1
10 2011-02-22 02:26:00
You'll have to call window.print(). 你必须调用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>
解决方案2
2 2018-01-29 21:54:36
Cody Bonney's answer will not work in certain browsers if the full url includes the image extension. 如果完整网址包含图片扩展名，Cody Bonney的答案将无法在某些浏览器中使用。 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. 忽略作为角度特定代码的scope.src 。 Everything else should work as long as you provide your own url value from somewhere else 只要您从其他地方提供自己的url值，其他所有内容都应该有效
解决方案3
2 2011-02-22 02:23:25
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() . 我建议您使用您正在使用的任何语言或框架创建一个页面，该页面接受图像路径的查询字符串参数，在文档中输出该图像并对window.print()进行onload / ready调用。 Link to that instead of the image directly, and keep the target="_blank" and you should be set. 直接链接到该图像而不是图像，并保持target="_blank" ，您应该设置。
解决方案4
1 2011-02-22 02:21:56
You have to call window.print() in javascript to trigger the browser print dialog. 您必须在javascript中调用window.print（）来触发浏览器打印对话框。 I'm pretty sure you can't trigger a print without user interaction unless you run a signed applet. 除非你运行一个签名的applet，否则我很确定你无法在没有用户交互的情况下触发打印。
解决方案5
0 2011-02-22 02:22:03
Hey Jag. 嘿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. 基本上这个代码的作用是在fancybox jquery插件中添加一个打印按钮。 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 添加打印功能到fancybox jquery插件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.