1. 为什么选择HTML+CSS来制作电子发票模板？
你可能觉得奇怪，现在市面上有那么多现成的报表工具、PDF生成库，为什么还要用最基础的HTML和CSS来折腾电子发票呢？我刚开始接触企业财务系统开发时也有这个疑问，但踩过几次坑之后，我彻底明白了：简单、可控、兼容性好，才是硬道理。
很多财务系统，特别是那些需要和Web端深度集成的，最终发票数据都要在浏览器里展示，或者通过浏览器打印。你想想，如果用后端直接生成PDF，一旦发票样式有调整，或者客户有个性化需求，你就得重新改代码、部署，非常麻烦。而HTML+CSS的方案，把样式和结构完全交给了前端，后端只需要提供干净的JSON数据。前端工程师可以像做普通网页一样，用熟悉的工具调试布局、颜色和字体，所见即所得。改个边框颜色？调个字体大小？分分钟搞定，热更新立刻生效，不用等漫长的编译和部署流程。
更重要的是打印控制。CSS里有一整套专门用于打印的媒体查询规则（@media print），你可以精确控制哪些元素在打印时显示、哪些隐藏，页眉页脚怎么设置，分页符在哪里插入。这对于发票这种对格式要求极其严格的文档来说，简直是量身定做。你不用担心在不同打印机、不同纸张尺寸上格式会乱掉，因为CSS的打印样式表就是干这个的。我实测下来，用这套方案生成的发票，无论是在办公室的激光打印机上，还是在热敏票据打印机上，效果都非常稳定。
最后是数据填充的灵活性。你的发票数据可能是从数据库里查出来的，也可能是通过API接口获取的。用HTML做模板，你可以轻松地使用JavaScript（比如Vue、React的数据绑定）或者服务端模板引擎（如Jinja2、Thymeleaf）把数据动态填进去。今天要生成普通发票，明天要生成增值税专用发票，你只需要切换不同的CSS样式和微调HTML结构，核心的数据处理逻辑完全不用动。这种解耦带来的开发效率提升，在长期维护中感受会特别明显。
2. 开工前必须搞清楚的税务规范要点
在动手写第一行代码之前，咱们得先把“规矩”搞清楚。电子发票不是你想设计成什么样就什么样的，它有国家统一的样式规范。如果格式不对，轻则被财务软件拒收，重则可能影响报销和税务认证。我刚开始做的时候，就因为几个细节没注意，被财务同事打回来重做了好几次。
首先，发票的构成要素一个都不能少。 无论是普通发票还是增值税发票，以下这些核心信息区块是必须存在的：
- 发票抬头：必须明确包含“增值税普通发票”或“增值税专用发票”字样。
- 发票代码和号码：这是发票的唯一标识，通常有固定的位数和格式。
- 开票日期：格式一般为“YYYY年MM月DD日”。
- 购买方和销售方信息：包括名称、纳税人识别号（或统一社会信用代码）。对于增值税专用发票，地址、电话、开户行及账号也是必填项。
- 货物或应税劳务明细：这是表格部分，需要列明项目名称、规格型号、单位、数量、单价、金额、税率和税额。表格的标题栏文字也有固定说法。
- 价税合计：必须同时有中文大写金额和阿拉伯数字小写金额，大写金额前通常有特殊符号（如“ⓧ”或“⊗”）表示封顶。
- 开票人、收款人、复核人：至少“开票人”是必有的。
- 备注栏：用于填写一些附加信息。
其次，样式上的“潜规则”要遵守。 这些虽然规范文件里不一定逐条写明，但却是业内通行且税务系统认可的做法：
- 颜色：通常使用深红色（类似
#902020）作为标题、关键标签和表格边框的颜色，黑色用于具体内容数据。这种配色方案清晰、正式。 - 字体：中文部分，标题常用宋体、黑体或楷体，以求清晰庄重；表格内数据和金额，为了对齐美观，经常使用等宽字体，如
Courier New。人民币符号“¥”也有专门的字体来确保显示一致。 - 布局与对齐：金额相关的数字列（数量、单价、金额、税额）必须右对齐，这是财务表格的基本要求，方便快速核对位数。文本列（如项目名称）一般左对齐，单位、税率等居中。
- 边框与线条：发票主体通常有一个外边框，内部的购买/销售方信息区、商品明细表格、价税合计区之间，会用线条进行视觉分隔，线条颜色与外边框一致。
把这些规范刻在脑子里，或者打印出来贴在显示器旁边，能帮你省下大量返工的时间。接下来，我们就基于这些规范，从零开始搭建。
3. 搭建普通发票模板的骨架与核心样式
好了，理论知识准备完毕，我们打开代码编辑器，开始实战。我们先从结构相对简单的增值税普通发票入手。我会把原始文章里的代码掰开揉碎了讲，并补充很多它没提到的细节和原理。
3.1 初始化与全局样式设定
第一步，创建一个标准的HTML5文档结构。这里有个关键点：为了获得精确的打印效果，我们通常会把发票的宽度固定下来。国内常见的发票打印纸宽度是210mm（A4纸宽度），对应到CSS像素大约是794px（因为打印分辨率PPI不同，这个值可能需要微调）。所以，我们直接给最外层的容器设定一个固定宽度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子发票（普通发票）模板</title>
<style>
/* 全局重置 - 避免浏览器默认样式干扰 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 这个非常重要！让元素的宽度包含padding和border */
}
ul, li {
list-style: none;
}
body {
font-family: "SimSun", "STSong", "宋体", serif; /* 优先使用宋体 */
font-size: 12px; /* 基础字体大小，大部分内容基于此 */
color: #000;
background-color: #fff;
display: flex;
justify-content: center; /* 让发票在页面居中 */
padding: 20px 0;
}
/* 发票主容器 */
.invoice-container {
width: 794px; /* 对应210mm */
min-height: 1123px; /* 对应A4纸高度，预留空间 */
border: 1px solid #000; /* 最外层的黑色边框 */
padding: 20px; /* 内边距，让内容不贴边 */
position: relative;
}
</style>
</head>
<body>
<div class="invoice-container">
<!-- 发票内容将在这里填充 -->
</div>
</body>
</html>
注意看，我特意把 lang 属性改成了 zh-CN，这有助于浏览器和辅助设备更好地识别中文内容。box-sizing: border-box; 是布局的神器，它让元素设置的 width 就包含了它的边框和内边距，你再也不用去心算 width + padding + border 到底是多少了，布局会非常可控。
3.2 构建发票头部：标题、二维码与票号
发票头部通常分为左、中、右三栏。左边放二维码和发票类型标签，中间是醒目的发票标题，右边是发票号码和开票日期。
<style>
.invoice-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 25px; /* 与下方内容拉开距离 */
}
/* 左侧区域 */
.header-left {
display: flex;
align-items: flex-start;
width: 220px;
}
.qrcode-placeholder {
width: 75px;
height: 75px;
border: 1px dashed #ccc; /* 开发时用虚线框表示占位，实际替换为img标签 */
margin-right: 10px;
background-color: #f9f9f9;
}
.invoice-tag {
width: 105px;
height: 75px;
border: 1px solid #902020; /* 使用标准的发票红 */
color: #902020;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
line-height: 1.4;
padding: 5px;
}
/* 中间标题区域 */
.header-center {
text-align: center;
flex-grow: 1;
}
.invoice-title {
font-size: 26px;
font-weight: bold;
color: #902020;
margin-bottom: 8px;
letter-spacing: 2
8476
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
