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

Posted 2023-02-21

技术标签:

【中文标题】单击时在新窗口中打印图像的最简单方法是啥？【英文标题】：What's the simplest way to get an image to print in a new window when clicked?单击时在新窗口中打印图像的最简单方法是什么？ 【发布时间】：2011-07-01 16:42:39 【问题描述】：

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

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

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

【问题讨论】：

【参考方案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>

【讨论】：

第一种方法对我不起作用。窗口打开并尝试打印，但由于图像在打印操作之前没有加载，所以它什么也不预览。我使用了类似于第二种方法的方法，将图像放入页面并等待它加载并像魅力一样工作。【参考方案2】：

如果完整的 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 值，其他一切都应该工作

【讨论】：

【参考方案3】：

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

【讨论】：

【参考方案4】：

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

【讨论】：

【参考方案5】：

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

Add print ability to fancybox jquery plugin