浏览器打印功能,有很多小伙伴可能不太清楚,这里我们可以学习一下。
情景:开发一个需要打印小票的项目。(在订单页里,给客户添加一个打印的操作)
1.假设打印机已经连接好了
2.我们这一节用的浏览器是Google Chrome (配置也是针对google的)
3.注意事项(这一点得看,否则运行失败还不知道问题喔)
开始:
1.打印机
去很多餐饮店,能看见收银台会有一个机器,打印出小票出来,但他们用的方法可能和我们的不一样,我们使用的是浏览器。
但是呢,浏览器也是有浏览器打印功能的,比如在这个页面,你用鼠标点击右键,就能看到一个"打印",点击之后就会弹出一个窗口,里面可能看到我们打印的内容(整个页面)。里面还有"更多设置",你可以根据内容,还有小票的大小尺寸,内容的多少来设置,这一套设置可能会花点时间。记住:这一套配置,是针对google打印的,并且这些操作跟我们编码无关
这些设置,并不是保存在我们服务器里的,是google浏览器的,所以说我们的开发环境配置好了,测试ok,还要去给客户配置
---------------------------我是分割线---------------------------
补充:
在做Google配置之前,我们先磕一些。。。上面说到,浏览器是有打印功能的,在页面鼠标右键可选择打印。 但是客户如果不太会操作电脑,对这些东西不太懂,那怎么办呢?每次都去培训客户吗,这是不正确的选择。所以我们的处理方案是,在代码里自动启动打印功能。
JS里的方法,有一个:print();
<script> print(); //启动打印功能 </script>
添加这么一句,启动我们这个页面的时候,就会弹出打印窗口了。
哇,挺简单的嘛,nonono... 接下来才是问题。我们想一下,打印窗口是弹出来了,但是客户每次都要手动去点击左上角的"打印",如果客户打印小票时,他的订单特别多,那就要一直去点击,如果一不小心点击到"取消",他就懵了,因为还要考虑到,他甚至不太懂可以刷新页面,按下F5键(考虑到工作比较忙,可能会着急忘掉了刷新,或者他本就不知道刷新能重启这个功能)
以上问题,就需去Google里做配置。做了配置之后的效果是什么呢,在这里说明一下:做好配置之后,弹出打印窗口时,客户就不需要去点击"打印",Google浏览器会自动运行"打印"。这样的话,效果就是:弹出打印窗口,自动运行打印并且关闭打印窗口,打印机若连接好,就会打印出小票
---------------------------我是分割线---------------------------
2.Google配置
1).打开google浏览器,在地址栏输入:"chrome://flags/"
2).进入页面之后,按下"Ctrl+F"搜索关键字:"Enable new Print Preview UI",能看到默认值为 Default,我们需要修改为 Disabled
3).修改之后,浏览器下方会弹出提示,点击右侧重启浏览器即可
4).选择google(一般都在桌面上)右键属性,在目标里,最后面添加"--kiosk-printing"
以上,配置好之后,就能成功运行自动打印了。(┭┮﹏┭┮我刚刚亲测了一遍,谁敢说不行站出来)
3.注意事项
这里再强调一下,以上做的配置,只是针对Google,若其他浏览器不行,是正常的!
这里会出现一个问题,就是客户也必须使用Google浏览器,其实问题也不会太大,顶多会出现客户对Google不习惯。能不能劝解客户,就看小伙伴们的水平了。。。
正题:第二点Google配置里,我们是在桌面上找到Google图标,然后在其属性里修改了。这里会出现一个问题,就是:只能用桌面上的这个Google才能实现自动打印。如果你是在Google的目录里,一般是在C盘下,打开程序,是不行的。我们在目录里右键选择属性,能看到,此程序是没有"目标"的,跟桌面上的是不一样的。当然,一般情况下,我们也不会去根目录里打开Google,所以这一点问题不大。
但还有一个,就是我们开发人员,或者客户,通常为了方便,可能会把浏览器设置在"任务栏"里,就是电脑屏幕最下面(windows系统通常是这样),如果我们在桌面上的Google属性里修改配置前,任务栏里已经有了Google,那么在任务栏里启动就不能实现自动打印,必须删除任务栏里的Google,重新在桌面上将Google添加在任务栏里。
最后还有一点,是关于功能上的。自动打印成功之后,我们停留的页面,应该是 "订单小票"页面,那么为了客户方便操作,我们就要去代码里实现功能,当自动打印实现后,就关闭此页面,这样 客户就会返回在订单页面,执行下一个订单的小票打印,就不用手动删除 小票打印页面。