zoukankan      html  css  js  c++  java
  • web端调用打印机方案总结

    背景

    新零售业务开始以来,一些线下商品上架售卖的同时,要明确售卖价格,前期人工人肉写标签贴上商品售卖价,容易

    产生疏忽,导致所标售卖价与收银所收价格不统一,造成顾客疑惑(据说还因为被投诉,上了新闻-_-)。为了使价格

    标识更为准确,现提供中台查询相应商品价格,并根据系统查询价格打印价格标签,可以有效避免因为人工疏忽大意

    造成价格误差。

    涉及技术

    web端调用打印机

    运行环境

    由于功能比较紧急投入使用,这里仅考虑chrome浏览器

    优点

    由前端来做打印功能,可快速实现功能的上线与迭代

    缺点

    由于打印参数都写在浏览器源码之中,js调用打印机,不能设定打印份数等参数

    js实现方案与细节

    window.print(),其实就是浏览器打印程序的一种调用,与直接点击打印功能效果一样,不能设置默认打印份数

    及选择使用的默认纸张类型等参数,只是省区用户去菜单里找到打印按钮的分所操作,可以直接点击页面上的打印

    按钮进行操作。浏览器默认打印浏览器页面之中所有的内容,利用这个特性,想要实现打印出期望的样式,可以有

    如下几个方法:

    1、点击调用打印功能时,将不需要打印的元素隐藏起来,例如:

    但是如果页面元素过多的话,要操作很多dom元素,所以这种方法不适用大多数场景

    2、将需要打印的元素包装进一个元素下面,具体步骤:

    • 先将页面完整的dom保存至一个中间变量
    • 获取打印元素dom对象
    • 将当前页面的body.innerHTML替换为打印目标元素
    • 唤起打印操作
    • 点击打印或取消打印之后,重新将第一步保存的页面dom赋给body.innerHTML
    • reload当前页面

    html:

    js:

    以上为示例代码,其中有两点需要特别注意:

    1、打印元素的css需要写成行内样式,因为将元素替换之后引入的外部css将不存在,造成元素无样式,特别是在现有的.vue文件中

    2、在打印完成或取消打印之后,要reload当前页面,因为重新以body.innerHTML填充之后,元素绑定的事件将不存在,所以需要重新加载页面进行事件绑定

    关于打印机的调试

    目前使用的打印机型号繁多,大多数只提供window版的驱动,以QR-488面单打印机为例,只能使用windows电脑进行打印调试,而且仓库打印所使用的

    电脑也基本都是windows系统,所以为了保持一致性,各位同学如果需要做打印面单或价签方面的需求,尽量使用windows电脑进行开发调试。

  • 相关阅读:
    【Leetcode】23. Merge k Sorted Lists
    【Leetcode】109. Convert Sorted List to Binary Search Tree
    【Leetcode】142.Linked List Cycle II
    【Leetcode】143. Reorder List
    【Leetcode】147. Insertion Sort List
    【Leetcode】86. Partition List
    jenkins 配置安全邮件
    python 发送安全邮件
    phpstorm 同步远程服务器代码
    phpUnit 断言
  • 原文地址:https://www.cnblogs.com/gaosong-shuhong/p/12450774.html
Copyright © 2011-2022 走看看