餐飲小票自主打印應用
餐飲小票是餐廳消費的主要憑證之一，與消費發票共同構成了很多單位財務報銷的依據。對於部分小餐飲企業由於各種原因未能為用戶提供餐飲小票，給消費者帶來麻煩。本例以此需求為背景結合JavaScript、HTML、CSS等設計開發基於Web的餐飲小票BIY軟件，可以低成本幫助商家解決小票打印問題。
實現效果
本例實現餐飲小票DIY應用，主要包括兩方面功能，其一為基本信息的填寫（基本信息、消費信息兩部分），即小票內容的填寫。所填寫基本信息主要包括商家名稱、座號、人數、收銀、日期、金額。消費信信息主要是指實際消費的信息，包括品類、數量及價格。基本信息設置部分運行頁面如下圖：
程序基本參數設置部分
基本信息設置頁面如上圖所示，在菜單詳情部分支持動態表格的自動添加，用戶點擊添加將自動生成表格，在表格中填寫菜單之後，會自動計算總金額並填寫的總金額字段部分。填寫菜單詳細信息部分運行截圖如下：
菜單詳情填寫部分界面
在完成基本信息設置之後，商家用戶可直接點擊一鍵生成小票按鈕實現小票的自動生成，並在窗口右側展示小票預覽效果。以上數據對應小票預覽功能實現截圖如下：
自動小票生成樣式示例
小票預覽沒有問題則可以繼續點擊打印按鈕實現小票的打印操作。調用系統的打印功能彈出打印設置窗口並進一步完成打印操作。打印操作頁面如下圖：
打印預覽窗口可設置紙張大小（本例A4）
以上給出該應用主要功能及相關操作頁面展示，商家可以使用該程序實現餐飲小票的打印輸出，其操作方便簡潔。
技術與實現說明
本例使用Sublime工具開發，主要使用技術包括HTML、CSS、原生JavaScript、前端框架PURE等進行的設計與開發。其中PURE及HTML、CSS主要用於實現前端頁面的架構與佈局。JavaScript主要用於實現業務操作。PURE使用主要鏈接其CSS樣式文件，實現代碼如下：
外部框架使用
Javascript編程部分主要對添加、重置餐單、一鍵生成、打印四個按鈕進行了JS編程實現。其中一鍵生成主要是獲取左側所填寫的小票基本信息，並在右側顯示出設計的小票樣式。
按鈕設計
本例為方便編程，將設置部分頂部基本信息單獨設計類進行描述，詳細菜單部分單獨設置類進行描述。小票按照信息也劃分為兩部分，頭部的基本信息與下方的菜品詳細信息，其中菜品詳細信息為表格佈局。添加數據實現部分代碼截圖如下：
菜品詳細信息寫入
打印功能較為簡單，只需要使用JS中window的print功能即可實現網頁頁面的打印操作。默認情況下將完成整個網頁的打印，本例只打印小票部分，因此在打印之前將其他部分內容隱藏，待打印完成再恢復顯示。打印功能封裝到myPrint方法，該方法代碼如下：
自定義打印函數
由於篇幅限制，其他技術部分問題、解決措施及代碼不再一一說明。如有問題可留言探討。
操作演示
使用預覽
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯繫作者，共同探討。期待大家關注！相關文章鏈接如下：
閱讀更多 kid編程 的文章
