背景
新零售業務開始以來，一些線下商品上架售賣的同時，要明確售賣價格，前期人工人肉寫標簽貼上商品售賣價，容易
產生疏忽，導致所標售賣價與收銀所收價格不統一，造成顧客疑惑（據說還因為被投訴，上了新聞-_-）。為了使價格
標識更為准確，現提供中台查詢相應商品價格，並根據系統查詢價格打印價格標簽，可以有效避免因為人工疏忽大意
造成價格誤差。
涉及技術
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電腦進行開發調試。