Question

我正在尝试为图像创建一个简单的点击打印链接，我想要发生的是当点击链接时，会打开一个带有图像的新窗口，浏览器会打开打印命令对话框框。

我的问题是，这是仅仅可以从URL参数，还是从发起页面上的锚元素开始？或者我是否必须使用javascript构建目标页面才能执行此操作？

以下是我所得到的样本：

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

显然上面的代码会在新窗口中打开图像，但仍需要用户按Ctrl + P，Cmd + P或使用浏览器命令。当用户点击链接时，我的客户希望图像“只是打印”，所以我试图找到最简单的方法来实现这一点。

那么我可以添加到上述标记中的任何参数或属性来完成我所描述的内容吗？

Answer 1

你必须调用window.print（）。也许是这样的？

function printimage(){
    var URL = "http://myimage.jpg";

    var W = window.open(URL);

    W.window.print();
}

另一种选择可能是将图像放在一个告诉浏览器加载时打印的页面上。例如......

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

Answer 2

我建议您使用您正在使用的任何语言或框架创建一个页面，该页面接受图像路径的查询字符串参数，在文档中输出该图像并进行onload / ready调用到window.print()。直接链接到该图像而不是图像，并保留target="_blank"，您应该设置。

Answer 3

您必须在javascript中调用window.print()才能触发浏览器打印对话框。我非常确定您无法在没有用户互动的情况下触发打印，除非您运行已签名的小程序。

Answer 4

如果完整网址包含图片扩展程序，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();

这将打开包含图像的新页面，提示用户进行打印，打印后，关闭新选项卡并将焦点重置为原始选项卡。

忽略角度特定代码的scope.src。只要您从其他地方提供自己的url值

，其他所有内容都应该有效

Answer 5

嘿Jag。虽然它不是你想要做的，但我在网页设计公司工作的时候写过这个教程。您可以搜索该代码以获取打印图像的链接。基本上这个代码的作用是在fancybox jquery插件中添加一个打印按钮。我不明白为什么你不能只使用打印部件将它添加到你需要的任何东西。希望能帮助到你。

Add print ability to fancybox jquery plugin

单击时在新窗口中打印图像的最简单方法是什么？

5 个答案: