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