HTML实现取餐小票

最新推荐文章于 2024-05-13 09:57:38 发布
最新推荐文章于 2024-05-13 09:57:38 发布
阅读量3.4k 收藏 16
点赞数 5
分类专栏： 笔记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48455576/article/details/113572605
版权

文章目录

在学习HTML的过程中自己去尝试实现一些小项目，写下来博客记录自己成长的过程，本文利用HTML+CSS在网页实现餐饮小票，该餐饮小票可直接打印，也可以根据需求进行相应的更改，源码以及素材已经全部放到了Gitee仓库中，需要的小伙伴们到仓库自取

仓库地址：https://gitee.com/dream-flight/repository

提示：以下是本篇文章正文内容，下面案例可供参考

本文实现的小票原型：
在这里插入图片描述

一、整体分析

对于取餐小票来说，文字信息要区分大小并且居中、分割线为虚线、两个table表格（两行三列和两行两列）、二维码图片上方的段落上下方以及段首都要有空格。该小票的整体思路是利用div图层和table表格来实现各个模块，再将各个模块按顺序拼接即可。

图示：
在这里插入图片描述

二、各模块实现代码

1.HTML语句

代码如下（示例）：

		<div>顾客联</div>
		<div class="place">请留意您的取餐账单号</div>
		<div class="self">自取顾客联</div>
		<div>XXX店铺（XXXX分店）</div>
		<div>010-123456789</div>
		<div class="self">--结账单--</div>
		<div class="place">账单号：X000001</div>
		<div>账单类型：堂食</div>
		<div>人数：2</div>
		<div>收银员：张三</div>
		<div>开单时间：2021-01-01 18:00:30</div>
		<div>结账时间：2021-01-01 18:01:24</div>
		<!-- hr为分割线 -->
		<hr/>
		<table>
			<tr>
				<td width="50" align="center">数量</td>
				<td width="190">品项</td>
				<td width="50" align="center">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<td>玉米肉松蛋饼2片<br>
				2 X --玉米肉松蛋饼<br>
				2 X --现磨豆浆（热/甜）
				</td>
				<td valign="top" align="right">8.00</td>
			</tr>
		</table>
		<hr/>
		<table>
			<tr>
				<td width="246">合计</td>
				<td width="50" align="right">8.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		<hr/>
		<div>打印时间：2021-01-01 18:01:40</div>
		<hr />
		<div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
		<div class="picture"><img src="./image/picture.png" width="150px"/></div>
		<div>官网：www.xxxxxxxx.com.cn</div>
		<div>加盟热线：86-21-123456789或86-22-123456789</div><br>

先利用多个div图层将不同行的文字信息包裹,其次加入分割线和table表格
&nbsp;用来表示一个空格，7个&nbsp;表示两个汉字的距离
在HTML中换行(回车键)会被解析为一个空格

在表格中设置文本的对齐格式时：
align用来设置文本的横向排列：left居左，right居右，center居中
valign用来设置文本的纵向排列：top居上、center居中、bottom居下

HTML中利用img标签插入图片，src的属性值为图片存放的相对路径（也可以为绝对路径，本文中用到的为相对路径）

2.CSS语句

代码如下（示例）：

<style>
			body{
				/*对整个页面进行样式的修饰*/
				width: 313px;
				font-size: 10px;  /*字体大小*/
			}
			/*对单独的样式进行设置*/
			hr{
				/*solid：实线 dashed：虚线*/
				border: 0.5px dashed;
			}
			.place{
				font-size: 24px;
				font-weight: bold;
			}
			.self{
				/*左边空一定的距离*/
				padding-left: 100px;
			}
			.note{
				padding-top: 20px;
				padding-bottom: 20px;
			}
			.picture{
				margin-left: 70px;
				margin-bottom: 20px;
			}
		</style>

在HTML中，对样式的设计写在style标签中，以key:value形式。在本文中利用了class来标记div图层，这里也可以用id来标记div图层，如果用id来标记div图层的话在style样式中把.改成#即可。（.用来选择class，#用来选择id）

三、运行结果

在这里插入图片描述

四、源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML实现取餐小票</title>
		<style>
			body{
				width: 313px;
				font-size: 10px;
			}
			hr{
				border: 0.5px dashed;
			}
			.place{
				font-size: 24px;
				font-weight: bold;
			}
			.self{
				padding-left: 100px;
			}
			.note{
				padding-top: 20px;
				padding-bottom: 20px;
			}
			.picture{
				margin-left: 70px;
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div>顾客联</div>
		<div class="place">请留意您的取餐账单号</div>
		<div class="self">自取顾客联</div>
		<div>XXX店铺（XXXX分店）</div>
		<div>010-123456789</div>
		<div class="self">--结账单--</div>
		<div class="place">账单号：X000001</div>
		<div>账单类型：堂食</div>
		<div>人数：2</div>
		<div>收银员：张三</div>
		<div>开单时间：2021-01-01 18:00:30</div>
		<div>结账时间：2021-01-01 18:01:24</div>
		
		<hr/>
		
		<table>
			<tr>
				<td width="50" align="center">数量</td>
				<td width="190">品项</td>
				<td width="50" align="center">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<td>玉米肉松蛋饼2片<br>
				2 X --玉米肉松蛋饼<br>
				2 X --现磨豆浆（热/甜）
				</td>
				<td valign="top" align="right">8.00</td>
			</tr>
		</table>
		
		<hr/>
		
		<table>
			<tr>
				<td width="246">合计</td>
				<td width="50" align="right">8.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		
		<hr/>
		
		<div>打印时间：2021-01-01 18:01:40</div>
		
		<hr />
		
		<div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
		
		<div class="picture"><img src="./image/picture.png" width="150px"/></div>
		
		<div>官网：www.xxxxxxxx.com.cn</div>
		<div>加盟热线：86-21-123456789或86-22-123456789</div><br>
	</body>
</html>

以上便是HTML实现餐饮小票的分析过程以及代码实现

Dream_飞翔
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
HTML发票票据,模板
03-29
随便写的HTML模板 HTML发票票据,模板 收款发票 收据
餐饮小票生成器
热门推荐
xinandaxuexutaoyang的博客
12-03 6万+
公司报销需要发票和餐饮小票一起，但是有时候只有发票没有小票。网上找了找，看到一个可以直接打印小票的，用法也很简单，只要输入金额和店名就可以生成了。mark一下也分享给各位。 地址：http://www.uwhile.com/ticket.html...
简洁高效的HTML发票模板 - 强大的开源解决方案
最新发布
gitblog_00070的博客
05-13 410
简洁高效的HTML发票模板 - 强大的开源解决方案 项目地址:https://gitcode.com/sparksuite/simple-html-invoice-template Simple HTML Invoice Template 在数字化的世界里，一份清晰、专业的发票是任何企业不可或缺的工具。而今天，我们向您推荐一个简洁且易于定制的HTML发票模板项目——Simple HTML Invo...
Web使用热敏打印小票(IE环境)
寒冰屋的专栏
09-23 925
概述 在html页下使用Epson P60II 热敏纸下打印小票，使用的打印方案为调用window.print()。 代码实现 1、定义窗体，设置宽度和高度 2、使用ActiveXObject，创建 Scripting.FileSystemObject​​​​​​​ function print_onclick() { var objfs = new ActiveXObject("Scripting.FileSystemObject"); var objprinter=objfs.C..
HTML定义ESCPOS热敏打打印模板,打印小票
HELLO
12-30 1万+
HTML定义POS机打打印模板，这样不用每个客户给它定义特定的POS模板了。 自已写HTML去吧，哈哈！！！ 热敏打印出来的效果，还是有一些差别，设备只有12px和48px的大小字体,40mm的设备上打出来，不太好看，80mm的还行! HTML代码 凑合着用吧,HTML上有一些限制,就是转成ESCPOS而已。 设备上内存小，打印二维码时
记录--前端小票打印、网页打印
林恒的博客
05-26 1822
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、小票打印 目前市面上的小票打印机大多采用的打印指令集为ESC/POS指令，它可以使用ASCII码、十进制、十六进制来控制打印，我们可以使用它来控制字体大小、打印排版、字体加粗、下划线、走纸、切纸、控制钱箱等，下面以初始化打印机为例： ASCII码 ESC @ 十进制码 27 64 十六进制 1B 40 小票打印...
餐饮餐厅饭店小票模板图例
wqj106288的博客
01-06 656
烙铁们，大家晚上好，今天不忙，整理了一些跑业务的必备神器资源，分享给大家，一些图例。由于晚上网速比较满，还有很多图例，下面我附上免费下载链接。
新建文件夹 (3).zip_JAVA打印_java实现打印小票
09-14
"JAVA打印_java实现打印小票"这个主题主要涵盖如何利用Java技术来设计和实现一个能自定义内容的小票打印程序。下面将详细介绍这个过程及其相关知识点。 1. **PrintService接口**： Java中的`PrintService`接口代表...
electron + vue项目实现打印小票功能及实现代码
10-17
在电子（Electron）+ Vue 项目中实现打印小票功能，主要涉及到Electron的API使用和Vue组件的配合。以下是对实现这一功能的详细解释： 1. **需求分析**： - 公司项目中可能需要通过Electron应用程序调用用户的系统...
PrintDocument实现打印小票
03-18
本文将深入探讨如何使用C#的`PrintDocument`类来实现小票的自动打印功能。 `PrintDocument`是.NET Framework中System.Drawing.Printing命名空间的一个核心类，用于处理文档的打印任务。它提供了一个接口，允许...
C语言购物小票代码实现
01-05
完成购物小票要求：添加功能 全显功能 购买功能 完成购物小票要求：添加功能 全显功能 购买功能 完成购物小票要求：添加功能 全显功能 购买功能 完成购物小票要求：添加功能 全显功能 购买功能 完成购物小票要求：...
pos刷卡小票
05-10
打印方便，适用于任何商家，打印pos好帮手。非常好
餐饮小票模板.doc
09-05
小票打印样例，餐饮行业通用，非常好的资源，难得难得难得
html调用打印实现打印
12-15
html调用打印实现打印
html前台打印小票(免弹框)
10-14
这是在网上找的一个打印的控件，还比较不错，可以指定打印机名称进行打印，并且不会像JS里面的window.print()会弹出选择打印机这个框，这一特点正好满足我的需求，现在上传上来供大家研究
JAVA连接打印机打印小票
02-27
本主题聚焦于使用JAVA连接打印机打印小票，通过三种不同的方法：POS命令、TSCLIB类库以及JAVA自带的类库来实现。下面将详细介绍这三种方式，并给出相关示例。 1. **POS命令**： POS（Point of Sale）命令是一种...
用纯HTML写一个凭证并打印
技术刚刚好
02-18 1531
24. `document.getElementById("currentDate").innerText = year + "年" + month + "月" + day + "日";12. `.headStyle { ... }`、`.headTitleLift { ... }`、`.title { ... }`等：定义了一些自定义样式，用于配水单头部和表格的布局。11. `@media print { ... }`：定义在打印模式下的样式，这里设置了`.no-print`类在打印时不显示。
收银员小票的html布局,小票打印源码（分成一行、二行、三行打印）
weixin_42421854的博客
06-15 543
资源下载此资源下载价格为3D币，请先登录资源文件列表╨í╞▒┤≥╙í╘┤┬δ/mark.txt,108╨í╞▒┤≥╙í╘┤┬δ/╨í╞▒┤≥╙í/DegreePrintExpress/DegreePrintExpress.sln,1023╨í╞▒┤≥╙í╘┤┬δ/╨í╞▒┤≥╙í/DegreePrintExpress/DegreePrintExpress.v12.suo,29184╨í...
普通发票（增值税专用发票）html+css
weixin_44110923的博客
06-25 4157
因业务需要，将发票样式呈现出来。直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
uniapp实现usb小票打印
01-28
Uniapp是一个基于Vue.js的跨平台应用开发框架，可以实现在多个平台上进行应用开发，包括手机端和桌面端。要实现USB小票打印，可以通过uniapp的插件机制来实现。 首先，需要在uniapp项目中引入USB打印机的相关插件，例如honeywell usb打印机插件。然后，在uniapp项目中编写相关的代码来调用该插件实现USB小票打印功能。 在代码中可以先进行USB打印机的连接，然后通过插件提供的接口来进行打印数据的发送。可以使用HTML5的打印功能来实现小票打印的样式设计，然后将需要打印的小票数据通过插件的接口发送给USB打印机，实现小票的打印功能。 另外，在uniapp项目中也可以通过调用原生的API来实现USB小票打印功能，比如在APP端可以通过调用Android或IOS的USB打印机API接口来实现USB小票打印功能。 总的来说，要在uniapp中实现USB小票打印功能，需要引入相关的USB打印机插件，并且在项目中进行适配和调用相关的API来实现USB小票打印功能。通过插件和原生API的调用，可以在uniapp中实现便捷高效的USB小票打印功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dream_飞翔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值