欢迎关注千巅科技，江西领先的企业信息化服务商！
前端开发-餐饮小票自主打印应用开发
餐饮小票自主打印应用
#程序员干货站#餐饮小票是餐厅消费的主要凭证之一，与消费发票共同构成了很多单位财务报销的依据。对于部分小餐饮企业由于各种原因未能为用户提供餐饮小票，给消费者带来麻烦。本例以此需求为背景结合JavaScript、HTML、CSS等设计开发基于Web的餐饮小票BIY软件，可以低成本帮助商家解决小票打印问题。
实现效果
本例实现餐饮小票DIY应用，主要包括两方面功能，其一为基本信息的填写（基本信息、消费信息两部分），即小票内容的填写。所填写基本信息主要包括商家名称、座号、人数、收银、日期、金额。消费信信息主要是指实际消费的信息，包括品类、数量及价格。基本信息设置部分运行页面如下图：
程序基本参数设置部分
基本信息设置页面如上图所示，在菜单详情部分支持动态表格的自动添加，用户点击添加将自动生成表格，在表格中填写菜单之后，会自动计算总金额并填写的总金额字段部分。填写菜单详细信息部分运行截图如下：
菜单详情填写部分界面
在完成基本信息设置之后，商家用户可直接点击一键生成小票按钮实现小票的自动生成，并在窗口右侧展示小票预览效果。以上数据对应小票预览功能实现截图如下：
自动小票生成样式示例
小票预览没有问题则可以继续点击打印按钮实现小票的打印操作。调用系统的打印功能弹出打印设置窗口并进一步完成打印操作。打印操作页面如下图：
打印预览窗口可设置纸张大小（本例A4）
以上给出该应用主要功能及相关操作页面展示，商家可以使用该程序实现餐饮小票的打印输出，其操作方便简洁。
技术与实现说明
本例使用Sublime工具开发，主要使用技术包括HTML、CSS、原生JavaScript、前端框架PURE等进行的设计与开发。其中PURE及HTML、CSS主要用于实现前端页面的架构与布局。JavaScript主要用于实现业务操作。PURE使用主要链接其CSS样式文件，实现代码如下：
外部框架使用
Javascript编程部分主要对添加、重置餐单、一键生成、打印四个按钮进行了JS编程实现。其中一键生成主要是获取左侧所填写的小票基本信息，并在右侧显示出设计的小票样式。
按钮设计
本例为方便编程，将设置部分顶部基本信息单独设计类进行描述，详细菜单部分单独设置类进行描述。小票按照信息也划分为两部分，头部的基本信息与下方的菜品详细信息，其中菜品详细信息为表格布局。添加数据实现部分代码截图如下：
菜品详细信息写入
打印功能较为简单，只需要使用JS中window的print功能即可实现网页页面的打印操作。默认情况下将完成整个网页的打印，本例只打印小票部分，因此在打印之前将其他部分内容隐藏，待打印完成再恢复显示。打印功能封装到myPrint方法，该方法代码如下：
自定义打印函数
由于篇幅限制，其他技术部分问题、解决措施及代码不再一一说明。如有问题可留言探讨。
操作演示
使用预览
新闻留言
姓名
(*)
:
不能为空
内容
(*)
:
不能为空
- 上一篇：响应式页面开发基础
- 下一篇：开发微信小程序直播需要哪些资质？
相关新闻
- 2020-09-30 千巅科技2020年中秋国庆放假通知
- 2020-09-15 推送低俗、淫秽等内容，这些APP被点名！这14款APP请谨慎下载使用
- 2020-09-05 网页版小程序和定制版小程序的区别是什么
- 2020-09-02 件开发定制、小程序定制开发团队哪家好？
- 2020-08-31 江西南昌直播小程序APP开发
- 2020-08-28 小程序存在的意义—用户篇
- 2020-08-25 2020年8月25日[七夕节]我司提前下班通知
- 2020-08-25 小程序商城交易中的信任问题
- 2020-08-24 如何实现小程序用户增长，开发者给了几点关键建议
- 2020-08-21 如何玩餐饮+小程序：三大业务场景典型营销案例
- 2020-08-20 微信小程序订阅消息开发指南
- 2020-08-14 网站封装成的APP，究竟有什么过人之处
- 2020-08-13 全国首届小程序云开发挑战赛正式启动报名
- 2020-08-08 小程序开发_家电维修小程需要开发什么样的功能？
- 2020-08-05 化妆品商家开发小程序：收益成倍增长
- 2020-07-31 导游微信小程序开发作用有哪些呢？
- 2020-07-29 餐饮行业该选择小程序开发还是APP开发？
- 2020-07-28 微信小商店上线，未来是否值得投入？
- 2020-07-24 基于 Serverless Framework 的人工智能小程序开发
- 2020-07-21 如何搭建微信公众号最快盈利模式？
