Web applications 从网站自动打印图像

Web applications 从网站自动打印图像,web-applications,printing,Web Applications,Printing,我和一位同事讨论了在浏览器中什么是可能的,什么是不可能的 然后出现了一个问题,我们两人都不能肯定地回答 您是否可以创建一个网页,这样当您导航到它时,它会占用客户端打印机并尝试打印文档。例如,每当你访问我的个人网站时,你都会看到我微笑的照片打印出来 现在,这是一个可怕的想法。我知道。但这场讨论引起了我的兴趣,我想知道是否可以做到,以及如何做到。我的朋友坚持说,你最好能为用户弹出打印对话框,他们必须自己点击打印 是否可以绕过此步骤?或者只是一些花哨的脚本,将鼠标移动到打印按钮上并单击它?或者使用ac

我和一位同事讨论了在浏览器中什么是可能的,什么是不可能的

然后出现了一个问题,我们两人都不能肯定地回答

您是否可以创建一个网页,这样当您导航到它时,它会占用客户端打印机并尝试打印文档。例如,每当你访问我的个人网站时,你都会看到我微笑的照片打印出来

现在,这是一个可怕的想法。我知道。但这场讨论引起了我的兴趣,我想知道是否可以做到,以及如何做到。我的朋友坚持说,你最好能为用户弹出打印对话框,他们必须自己点击打印


是否可以绕过此步骤?或者只是一些花哨的脚本,将鼠标移动到打印按钮上并单击它?或者使用activeX控件直接与打印机API接口?

据我所知,您不能绕过打印对话框。如果浏览器允许的话,这将是一个非常明显的安全缺陷。但是,您可以使用“window.print()”打开打印对话框。

您必须提示用户打印当前页面,无法绕过此步骤(可能在IE的activeX中)。也就是说,有两种不同的方式可以提示用户在加载页面时打印您微笑的图像

下面是如何在JavaScript中实现这一点

window.onload = function() {
  var img = window.open("me-smiling.png");
  img.print();
}
下面是如何在css/javascript/html中实现这一点(假设您的图片具有
id
“我微笑”): CSS:

Javascript:

 window.onload = function() { window.print() }

我认为,您最多需要一个使用基本windows API的ActiveX组件来获取默认打印机的设备上下文,并尝试使用打印机设置的假定值打印嵌入图像。

AttendStar创建了一个免费的附加组件,该附加组件可抑制对话框并删除大多数版本的打印机的所有页眉和页脚火狐


启用该功能后,可以使用$('img').jqprint();jqprint for jquery将只打印从web应用程序自动调用的图像。

要自动打印到默认打印机而不看到打印对话框提示,我在以下问题中分享了一些在IE7、IE8和IE9中适用的代码:


我找到的避免打印对话框的唯一解决方案是在Mozilla Firefox上创建一个变量来设置自动打印。如果您需要使用其他浏览器,这可能不是最好的解决方案,但在我的情况下,我只需要自动打印报告即可:

1-打开Firefox并在地址栏中键入“about:config”
2-右键单击任何首选项并选择“新建”>“布尔值”
3-添加一个名为“print.always\u print\u silent”且值为“true”的变量
4-重新启动Firefox


希望能帮助你

据我所知,没有客户端干预(如设置浏览器标志),无法直接打印文档。 在我们当前的项目中,我们需要直接打印到默认打印机,但至少使用Chrome,您可以通过附加的启动参数轻松完成

要直接打印到操作系统默认打印机,可以使用:

“C:\ProgramFiles(x86)\Google\Chrome\Application\Chrome.exe”--用户数据目录=C:\tmp--kiosk打印http://www.contoso.com

另一个可能也很有用的选项是tos使用本机打印对话框而不是chromes打印预览

“C:\ProgramFiles(x86)\Google\Chrome\Application\Chrome.exe”--用户数据目录=C:\tmp--禁用打印预览http://www.contoso.com

请注意,
window.print()
和/或Ctrl-p的行为与上述设置相应

我知道,这并不能完全回答OPs问题,但我认为这有点相关,对于基于web的企业应用程序来说,这是一个非常常见的用例。也许有人觉得它有用


对于Firefox,我从最近几天的大量搜索中推荐, 我找到了一个最好的解决办法。 迄今为止,Chrome不支持从javascript直接打印。 它已经发布了USB和串行API,这可能会有所帮助

但目前我使用的是开源的JavaApplet解决方案。 -建造 当我在建造它的过程中出错的时候。我更喜欢预构建的QZ打印插件1.9.3 桌面应用程序,非常好用

从这里下载:

代码示例:

/***************************************************************************
 * Prototype function for printing an HTML screenshot of the existing page
 * Usage: (identical to appendImage(), but uses html2canvas for png rendering)
 *    qz.setPaperSize("8.5in", "11.0in");  // US Letter
 *    qz.setAutoSize(true);
 *    qz.appendImage($("canvas")[0].toDataURL('image/png'));
 ***************************************************************************/
function printHTML5Page() {
    $("#qz-status").html2canvas({
        canvas: hidden_screenshot,
        onrendered: function() {
            if (notReady()) { return; }
            // Optional, set up custom page size.  These only work for PostScript printing.
            // setPaperSize() must be called before setAutoSize(), setOrientation(), etc.
            qz.setPaperSize("8.5in", "11.0in");  // US Letter
            qz.setAutoSize(true);
            qz.appendImage($("canvas")[0].toDataURL('image/png'));

            //qz.setCopies(3);
            qz.setCopies(parseInt(document.getElementById("copies").value));

            // Automatically gets called when "qz.appendFile()" is finished.
            window['qzDoneAppending'] = function() {
                // Tell the applet to print.
                qz.printPS();

                // Remove reference to this function
                window['qzDoneAppending'] = null;
            };
        }
    });
}
完整示例可在此处找到:
这是我为firefox找到的最佳解决方案: 有一个很棒的附加组件


它的工作原理很有魅力。

仅仅因为它“可能”是一个安全缺陷,并不意味着它已经不是一个安全缺陷。我以前遇到过这个要求。它是通过在线订单在热菜配送服务中自动打印食品订单。他们只是想把订单写在纸上,而不需要确认。我最近看到的新一系列“云打印机”也提供了这一业务功能,但绕过了浏览器。有没有办法让它也必须有两个大拇指?没有,浏览器不支持打印两个大拇指的图片(即支持一个大拇指)。您可以发送打印而不显示打印对话框。不幸的是,这只适用于IE。希望这有点帮助:这不仅真的很有趣,还表明我所问的问题实际上有一个商业案例。这是我当时不知道的,不是一个理想的答案。请阅读Thank@AmitP上的回答指南。我会改进的。
/***************************************************************************
 * Prototype function for printing an HTML screenshot of the existing page
 * Usage: (identical to appendImage(), but uses html2canvas for png rendering)
 *    qz.setPaperSize("8.5in", "11.0in");  // US Letter
 *    qz.setAutoSize(true);
 *    qz.appendImage($("canvas")[0].toDataURL('image/png'));
 ***************************************************************************/
function printHTML5Page() {
    $("#qz-status").html2canvas({
        canvas: hidden_screenshot,
        onrendered: function() {
            if (notReady()) { return; }
            // Optional, set up custom page size.  These only work for PostScript printing.
            // setPaperSize() must be called before setAutoSize(), setOrientation(), etc.
            qz.setPaperSize("8.5in", "11.0in");  // US Letter
            qz.setAutoSize(true);
            qz.appendImage($("canvas")[0].toDataURL('image/png'));

            //qz.setCopies(3);
            qz.setCopies(parseInt(document.getElementById("copies").value));

            // Automatically gets called when "qz.appendFile()" is finished.
            window['qzDoneAppending'] = function() {
                // Tell the applet to print.
                qz.printPS();

                // Remove reference to this function
                window['qzDoneAppending'] = null;
            };
        }
    });
}