6

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

我的问题是这是否可能仅来自 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 或使用浏览器命令。当用户单击链接时，我的客户希望图像“仅打印”，因此我试图找到完成此操作的最简单方法。

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

4

5 回答 5

11

您必须调用 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>
于 2011-02-22T02:26:00.790 回答
3

如果完整的 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();

这将打开一个带有图像的新页面，提示用户打印，并在打印后关闭新选项卡并将焦点重置到原始选项卡。

忽略scope.src那是角度特定的代码。只要您url从其他地方提供自己的价值，其他一切都应该起作用

于 2018-01-29T21:54:36.867 回答
2

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

于 2011-02-22T02:23:25.977 回答
1

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

于 2011-02-22T02:21:56.833 回答
0

嘿，贾格。虽然它不完全是您想要做的，但我确实在一家网页设计公司工作时编写了本教程。您可能可以翻阅该代码以获取打印图像的链接。基本上这段代码的作用是为fancybox jquery插件添加一个打印按钮。我不明白为什么您不能只使用打印部分将其添加到您需要的任何内容中。希望能帮助到你。

为fancybox jquery插件添加打印功能

于 2011-02-22T02:22:03.263 回答