• 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电脑进行开发调试。

  • 相关阅读:
    git代码回退
    7 用两个栈实现队列
    《Java并发编程实战》学习笔记
    226. Invert Binary Tree
    Interface与abstract类的区别
    Override和Overload的区别
    Java面向对象的三个特征与含义
    String、StringBuffer与StringBuilder的区别
    Hashcode的作用
    Object有哪些公用方法
  • 原文地址:https://www.cnblogs.com/gaosong-shuhong/p/12450774.html
Copyright © 2020-2023  润新知