银行汇款单这种“票据型页面”确实是个被很多人低估的小项目。最近我在给公司内部做转账申请流程业务方丢过来一个需求员工要能在线填写汇款信息同时支持直接打印成一张能和纸质汇款单对得上的A4单据拿去走签字审批。他们以前用Excel模板结果三个人改一轮之后格式就散架了财务每次都要手工重排苦不堪言。我接手后仔细想了想这个需求最合理的实现载体其实是HTML页面既能做成现代表单的填写体验又能通过打印样式输出固定版式金额录入后自动转中文大写、日期自动填充、字段校验这些逻辑用原生JavaScript几十行就能搞定。这篇文章把从选型、结构拆解、表格还原、会计联动到A4打印适配的完整过程全部讲一遍任何人在自己系统里需要做类似的单据打印都可以直接照着落地。先声明一个底线本文做的是通用业务单据样例虚拟了银行信息页面适合内部申请、教学演示、样式还原这类场景不能也不应该当作真实的银行结算凭证使用。明确了这一点我们再正式开始。1. 为什么选择“HTML打印”而不是Excel模板或PDF表单1.1 纸单据数字化的三个常见方案为什么被否掉接到“做一个能打印的汇款单”这个需求时我第一反应也是“丢个Excel模板不就行了吗”。但只要仔细推演一下使用场景Excel的缺点立刻暴露出来它是编辑状态和成品状态混在一起的工具你永远无法阻止一个不熟悉Excel的人在“户名”旁边插入一列或者把账号列改成科学计数法显示。哪怕你写了详尽的批注、锁定了单元格只要有一个人说“我这里打开看不到格式”运维成本就开始无限上升。PDF可编辑表单我也考虑过。正规的表单工具确实能做成可填写、可打印的PDF但普通员工电脑上不一定装了能编辑PDF的专业阅读器而且PDF很难和内部系统数据打通——系统里的客户信息、金额字段难道要人肉复制粘贴进去这种体验在2025年做业务系统是没法接受的。Word邮件合并则更偏向“批量套打”它适合一次性生成一百封内容相同结构的合同却不适合财务人员每天零散地处理几笔不同来源的汇款申请。所以HTML页面成了最佳解。浏览器的打印能力已经非常成熟只要掌握几个关键CSS属性就能把网页精确投射到A4纸上。它天然能和内部系统做数据对接员工打开页面时很多字段可以从系统直接带入填写时是表单打印时是票据一套代码两套形态。1.2 始终保持“纸质版式为第一优先级”的思维方式这个需求里最需要注意的一点是我们在做的不是一般意义的网页表单而是“纸质单据的数字化交互壳”。很多前端同事拿到需求就开始按网页思维设计——上下排列、大量留白、圆角卡片感。但打印出来一看和汇款单没有半点关系财务根本不认可理由只有一个字“不像”。正确的设计顺序应该是先找一张真实的汇款单样单逐行逐字拆它的版面逻辑再考虑在哪一个位置上放输入框、哪里放固定文案。HTML在这里扮演的角色是一个“能够用浏览器打印出票据的容器”而不是一个普通的B端页面。这个思维方式可以迁移到所有票据类场景工资条、请假单、采购申请单、报销单。只要最终输出物是纸质凭证页面设计就必须以纸张版式为第一优先级所有交互和视觉都要让位于最终的“打印一致性”。2. 汇款单信息架构拆解纸质单据的字段分区与HTML标签映射2.1 一张汇款单上逃不开的四组信息模块别看汇款单密密麻麻把字段归类之后其实只有四个模块。第一模块是单据头包括单据名称例如“XX银行转账汇款单”、单据编号和日期。这一部分在视觉上是通栏的大标题区字体最重是整个页面的“身份识别”。第二模块是汇款人付款方一般由户名、账号、开户行三个字段组成。纸质单据上它通常是一个横向区块三个字段顺序是“户名-账号-开户行”这和很多数据库表里的“账号”优先顺序不同照着纸质样式来。第三模块是收款人收款方同样包含户名、账号、开户行。而金额区域往往紧跟着收款人区块出现币种、小写金额、中文大写金额有时还带一个角分栏。这里是一张汇款单里信息密度最高的区域也是视觉上最容易出错的地方。第四模块是底部区域包括汇款用途或附言、是否加急、申请人签名、复核签名、银行签章或打印条码位。设计时建议在底部留白多一些因为纸质签批流程需要在上面写字空间太窄不实用。2.2 从纸质样单到table网格的拆分方法我的做法是找一张真实的样单把它按行线拆开手动标注哪个字段占几列、哪一行是跨列的。这一步做完表格结构其实已经出来了剩下只是把标注翻译成HTML。常规汇款单整体建议用一个 7 行 × 6 列的table来组织第1行单据标题colspan6通栏第2行左侧单据编号右侧日期左4列右2列第3行“汇款人”分组标题全宽第4行户名2列、账号2列、开户行2列第5行“收款人”分组标题全宽第6行收款人户名、账号、开户行同样各占2列第7行金额区、用途区、签名区交错。有人可能会问为什么不用更现代的CSS Grid或Flex布局。我的答案是票据本身就是天然二维矩形网格而table标签的语义、colspan/rowspan、border-collapse跟这个需求是天生匹配的。不是说Grid做不出来而是table在打印场景下的浏览器兼容性和表格线控制是最省心的尤其内部系统的用户浏览器版本参差不齐时table几乎不会有意外。3. 表格与CSS的票据质感还原从单线框到金额栏的对齐细节3.1 完整的HTML骨架代码先给出一段能直接落地的HTML骨架。为了读代码时逻辑更清楚我精简了部分重复字段实际使用时复制相应结构即可!DOCTYPE html html langzh-CN head meta charsetUTF-8 title银行汇款单样例/title link relstylesheet hrefremittance-slip.css /head body div classaction-bar button typebutton idprintBtn打印汇款单/button button typebutton idresetBtn清空重填/button span classtip请核对信息后再打印此单仅为业务流转样例。/span /div div classslip-wrapper table classremittance-slip thead tr th colspan6 classslip-titleXX银行转账汇款单/th /tr tr td colspan4 classmeta-cell单据编号span idslipNumber2025-0102-001/span/td td colspan2 classmeta-cell text-right日期span idslipDate/span/td /tr /thead tbody tr classsection-row td colspan6 classsection-title汇款人付款方/td /tr tr classfield-row td classlabel-cell户名/td td colspan2 classfield-cellinput typetext idpayerName placeholder请输入付款户名/td td classlabel-cell账号/td td colspan2 classfield-cellinput typetext idpayerAccount placeholder请输入付款账号/td /tr tr classfield-row td classlabel-cell开户行/td td colspan5 classfield-cellinput typetext idpayerBank placeholder请输入付款开户行/td /tr tr classsection-row td colspan6 classsection-title收款人收款方/td /tr tr classfield-row td classlabel-cell户名/td td colspan2 classfield-cellinput typetext idpayeeName placeholder请输入收款户名/td td classlabel-cell账号/td td colspan2 classfield-cellinput typetext idpayeeAccount placeholder请输入收款账号/td /tr tr classfield-row td classlabel-cell开户行/td td colspan5 classfield-cellinput typetext idpayeeBank placeholder请输入收款开户行/td /tr tr classsection-row td colspan6 classsection-title汇款金额/td /tr tr classfield-row td classlabel-cell币种/td td classfield-cell人民币/td td classlabel-cell小写金额/td td classfield-cellinput typetext idamountSmall placeholder如 12345.60/td td classlabel-cell colspan1大写金额/td td classfield-cell amount-upper-cell idamountUpper零元整/td /tr tr classsection-row td colspan6 classsection-title用途 / 附言/td /tr tr classfield-row td colspan6 classfield-cellinput typetext idpurpose placeholder请填写汇款用途例如货款、服务费、项目款/td /tr tr classfield-row signature-row td classlabel-cell申请人签字/td td colspan2 classsignature-cell/td td classlabel-cell复核人签字/td td colspan2 classsignature-cell/td /tr tr classfield-row td classlabel-cell银行签章区/td td colspan5 classsignature-cell bank-stamp-cell/td /tr /tbody /table /div script srcremittance-slip.js/script /body /html这个骨架的最大特点是每一个输入字段都嵌在带边框的td里用户输入的视觉位置就是打印输出的位置表里表外完全一致。这也是“所见即所得”在票据类页面里的真正含义——不是浏览器里好看而是打印出来和预想的一样。3.2 票据质感的CSS细节线框、字体、输入框去样式化接下来是CSS部分。我强调几个容易踩坑的细节。第一个坑input默认样式会破坏画面统一。表单控件默认自带边框和背景会让显示区域变得很“网页”。解决思路是让input完全“融”进表格——去除边框、背景透明、继承字体这样用户在填写时看到的是表格内文字不会突兀地出现一个控件感很强的输入框。第二个坑width: 100%和padding的兼容问题。很多浏览器的盒模型默认是content-boxinput设置了width:100%再设置padding就会撑破单元格。我在代码开头统一用box-sizing: border-box;把全局盒模型切掉一劳永逸。第三个坑表格宽度溢出不换行。table-layout: fixed非常关键它告诉浏览器所有列宽严格遵守设定不随内容扩展。配合word-wrap: break-word即使账号这种长串数字也不会把单元格撑变形。* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: FangSong, STFangsong, SimSun, Songti SC, serif; background: #e9e9e9; padding: 24px; } .action-bar { max-width: 794px; margin: 0 auto 16px auto; display: flex; gap: 12px; align-items: center; } .action-bar button { padding: 6px 18px; font-size: 14px; cursor: pointer; } .action-bar .tip { font-size: 13px; color: #888; } .slip-wrapper { max-width: 794px; margin: 0 auto; background: #ffffff; padding: 28px 32px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .remittance-slip { width: 100%; table-layout: fixed; border-collapse: collapse; } .remittance-slip th, .remittance-slip td { border: 1px solid #000; padding: 8px 10px; vertical-align: middle; line-height: 1.6; font-size: 14px; } .slip-title { font-size: 22px; letter-spacing: 6px; text-align: center; padding: 14px 0; font-weight: 700; } .meta-cell { font-size: 13px; background: #fafafa; } .text-right { text-align: right; } .section-row .section-title { background: #f0f0f0; text-align: left; font-weight: 600; letter-spacing: 2px; } .label-cell { width: 12%; text-align: center; background: #f7f7f7; font-weight: 600; } .field-cell input { width: 100%; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; height: 28px; line-height: 28px; } .amount-upper-cell { font-size: 16px; letter-spacing: 2px; font-weight: 600; min-height: 36px; } .signature-cell { height: 52px; } .bank-stamp-cell { height: 80px; } .error-border { outline: 2px solid #d93025; outline-offset: -2px; }这里特意用font-family: FangSong, STFangsong, SimSun, Songti SC, serif做字体栈是因为仿宋体最接近传统票据的书写感觉。Windows通常有“仿宋”macOS会命中“宋体-简”或回退到serif。打印场景下字体回退不会造成布局灾难因为表格宽度已经锁定。3.3 金额大写区域和签名区的特殊处理金额区是我最在意的位置。小写金额输入框保持普通输入框形态但重点关注右侧的“大写金额”展示格它是一个不带input的td默认显示“零元整”当用户输入金额后由JavaScript实时更新。这样既模拟了纸质单据上人工填写大写金额的留白区域又避免了用户自己输入大写、容易写错“叁”、“佰”这类字的窘境。签名区没有做成输入框而是留白单元格加固定高度。原因很实际这个区域是打印出来之后用笔签字的不是网页上敲键盘的。如果把签名区也塞进input打印时反而会出现一条奇怪的下划线或文本框不好看。所以签名区一律用空白cell只保证高度足够手写。底部“银行签章区”我额外加高了到80px并且建议在真实项目里做成一个虚线边框的单元格。虚线边框可以在打印时保留银行或财务会在这个区域盖章视觉上能引导他们盖在正确位置上。如果担心虚线框太过刻意可以做成很淡的浅灰色边框打印设置“背景图形”后方可显示。4. 会计联动逻辑人民币大写、日期与必填校验4.1 人民币大写转换的核心规则与前端实现做汇款单页面最有“含金量”的部分就是中文大写金额转换。实时把小写的12345.60转成“壹万贰仟叁佰肆拾伍元陆角”这个功能听起来很小但真正写起来要处理的边界情况不少。人民币大写有几个硬性规则前端转写时必须严格遵守中文数字是壹、贰、叁、肆、伍、陆、柒、捌、玖、零单位是拾、佰、仟、万、亿整数部分从低位到高位每四位一组对应万、亿、兆连续多个零只写一个“零”例如1005写“壹仟零伍”而不是“壹仟零零伍”元之后如果没有角分要写“整”如果有角无分则不写“整”如果整数部分为0则写“零元”。按照上面这些规则我写了这个转换函数支持到亿并且自动四舍五入到分// 人民币金额大写支持到亿四舍五入到分 function amountToChinese(amount) { var num Math.round(amount * 100) / 100; var token String(num).split(.); var integerPart Number(token[0] || 0); var decimalPart token[1] ? token[1].padEnd(2, 0).slice(0, 2) : 00; var digits 零壹贰叁肆伍陆柒捌玖; var radix [, 拾, 佰, 仟]; var bigRadix [, 万, 亿, 兆]; var result ; var zeroCount 0; if (integerPart 0) { result 零; } else { var group []; var n integerPart; while (n 0) { group.push(n % 10000); n Math.floor(n / 10000); } for (var i group.length - 1; i 0; i--) { var g group[i]; if (g 0) { zeroCount; continue; } if (zeroCount 0 result.length 0) { result 零; } zeroCount 0; var gStr String(g); var gLen gStr.length; for (var j 0; j gLen; j) { var d Number(gStr[j]); if (d 0) { zeroCount; } else { if (zeroCount 0) { result 零; } zeroCount 0; result digits[d] radix[gLen - 1 - j]; } } if (i ! 0) { result bigRadix[i]; } } } result 元; var jiao Number(decimalPart[0]); var fen Number(decimalPart[1]); if (jiao 0 fen 0) { result 整; } else { if (jiao 0) { result digits[jiao] 角; } else { result 零; } if (fen 0) { result digits[fen] 分; } } return result; }这套实现的大致思路是先把整数部分按四位分组拆开然后从高位到低位拼读音节每组内部再按“数字单位”拼接组与组之间根据是否需要补“零”做判断。实际测试中1005会得到“壹仟零伍元整”1000000会得到“壹佰万元整”100000001会得到“壹亿零壹元整”表现都符合会计书写习惯。4.2 金额输入联动与日期自动填充金额输入联动其实很简单监听小写金额输入框的blur事件读取输入值尝试转成数字成功就调用转换函数并把结果填入大写金额单元格失败则提示“金额格式不正确”。注意要用Math.round(amount * 100) / 100处理浮点数精度问题否则0.1 0.2这种经典问题会直接坑到你。日期自动填充我选择在页面加载时执行用new Date()取当前日期格式化成“xxxx年xx月xx日”写入单据头的日期span。这个看似简单的小功能在打印场景里省了员工每次手写日期的麻烦也避免了不同人日期格式不统一的问题。function fillCurrentDate() { var now new Date(); var y now.getFullYear(); var m String(now.getMonth() 1).padStart(2, 0); var d String(now.getDate()).padStart(2, 0); document.getElementById(slipDate).textContent y 年 m 月 d 日; } // 金额输入框消耗事件 document.getElementById(amountSmall).addEventListener(blur, function () { var val this.value.trim(); if (val ) { document.getElementById(amountUpper).textContent 零元整; return; } var amount parseFloat(val); if (isNaN(amount) || amount 0) { alert(请输入正确的金额); this.classList.add(error-border); return; } this.classList.remove(error-border); document.getElementById(amountUpper).textContent amountToChinese(amount); });4.3 必填校验做到“能拦截但不惹人烦”票据类页面最怕员工填到一半直接打印到了财务那里发现账号少一位。我的做法是校验逻辑只在“打印”按钮点击时执行而不是输入时实时触发。实时校验会让人感觉很啰嗦但点击打印前统一校验提示要补哪一项体验就好很多。校验项包括汇款人户名、汇款人账号、收款人户名、收款人账号、收款人开户行、金额。账号这一类我用一个简单的正则校验只允许数字。不要过度校验比如开户行名称千奇百怪有“XX银行股份有限公司XX支行”有“XX银行”强行校验开户行格式只会误伤。function checkRequired(id) { var el document.getElementById(id); if (!el.value.trim()) { el.classList.add(error-border); return false; } el.classList.remove(error-border); return true; } function validateAll() { var ids [payerName, payerAccount, payeeName, payeeAccount, payeeBank, amountSmall]; var allOk true; for (var i 0; i ids.length; i) { if (!checkRequired(ids[i])) { allOk false; } } return allOk; } document.getElementById(printBtn).addEventListener(click, function () { if (!validateAll()) { alert(请先补全带红色提示的必填项); return; } window.print(); });这里有个细节值得专门说一下给input加红色错误提示时我用的是outline而不是border。因为input本身没有边框直接加border会导致单元格内的高度抖动而outline不影响box size打印时只要用户不去打印错误状态的页面就不会残留红框。5. 打印到A4的实测适配页边距、分页与浏览器差异5.1 media print里必须写清的三个关键点页面样式做好之后最重要的就是打印适配。这一步做不好浏览器里再漂亮也是白搭。我的经验是 media print 里必须写清楚三件事隐藏操作按钮、去掉屏幕端背景和阴影、强制表格线显示。media print { body { background: #ffffff; padding: 0; } .action-bar { display: none !important; } .slip-wrapper { max-width: 100%; box-shadow: none; padding: 0; } .remittance-slip th, .remittance-slip td { border: 1px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .meta-cell, .section-row .section-title, .label-cell { background: #ffffff; /* 打印时去掉底色省墨且减少干扰 */ } } page { size: A4 portrait; margin: 10mm; }第一件事.action-bar必须隐藏。这是最容易忘的打印预览里看到一个大大的“打印汇款单”按钮那种尴尬我经历过不止一次。第二件事背景色和阴影要去掉。屏幕端的浅灰色背景、卡片阴影在打印里没有任何意义还浪费墨。注意不是把表格线去掉表格线用border保留但区块的底色统一去掉。第三件事page的边距设置。我推荐margin: 10mm。10mm是比较接近打印机的物理极限的值再小的话有些打印机边缘打印不出来再大会让票据显得局促。另外print-color-adjust: exact这一行很关键某些浏览器默认不打印背景色如果你的设计需要保留底色必须写这个属性让浏览器“听命”。5.2 实测中的浏览器差异与处理策略不同浏览器的打印行为差异是这类页面的最大变量。我在实测中整理了以下几个最常见的坑。Chrome/Edge打印对话框默认缩放百分比经常是95%有时候甚至自适应“适合页面”这会让表格出现肉眼可见的缩小。我的建议是在打印按钮点击前不强行改浏览器设置但可以在页面右下角放一行小字提示“打印时请选择100%缩放、A4纸、自定义边距”。实测下来多数人照着提示操作就能获得稳定输出。Firefox对page边距的支持和Chrome略有差异Firefox更尊重page里设置的值但前提是用户在打印对话框里选择“使用系统对话框”或“使用页面设置”。如果遇到Firefox边距不对优先检查打印首选项里有没有被覆盖。表格跨页一张汇款单在内容没有被塞爆的情况下高度是严格控制在A4内的。但万一用户填了超长开户行名称导致换行表格就有被压到第二页的风险。CSS里可以加page-break-inside: avoid让表格整体不被切断这样一来如果超了一页浏览器会选择把整块挪到第二页至少不会出现表头在上一页、内容在下一页的惨剧。5.3 打印前自检清单与假数据调试法做票据页面的人都会遇到一个共同问题排版在浏览器里怎么看怎么正常打印出来总觉得哪不对劲。这是因为屏幕显示和纸面呈现的宽度、对比度都有差异。我强烈建议采用“假数据调试法”在开发阶段把一组长度最极端的假数据填进去——比如30位账号、十几个字的长户名、大额金额——然后直接打印一张样张看整体效果。我的自检清单大致是这样的检查项说明表格线是否完整尤其是最外边框是否有断线输入框内容是否都可见长账号是否被截断或溢出金额大写是否正确重点检查整数末尾的零、角分整日期是否自动填充不能是“undefined年”之类的错误按钮是否隐藏打印件上不允许出现网页操作控件纸张边距是否均匀上下左右留白是否一致区块底色是否符合预期需要底色确认浏览器正确打印我自己的第一版汇款单就是因为没做假数据测试直接在真机上填了一个20位账号才打开打印预览结果输入框里的后四位直接被截断了。问题根源是我虽然设了table-layout: fixed但忘了在输入框的样式里增加overflow: hidden; text-overflow: ellipsis;长文本把单元格“顶开”了。虽然宽度锁死不会导致表格变形但不加处理内容溢出视口的部分会在打印时被裁掉给财务带来的就是账号不完整。这个教训很深刻现在我的做法是账号类输入框额外加一个maxlength32属性长于32位的输入直接不允许从源头杜绝。还有一点是关于打印预览的。我建议在页面里预留一个“打印预览”按钮和“打印汇款单”按钮分开。“打印预览”实际调用的是window.print()但很多浏览器打印对话框本身就是预览界面所以其实不需要额外实现。真正需要的是一个“清空重填”按钮因为员工填错一遍之后如果页面没有重置入口他们会直接刷新然后抱怨“填的内容怎么还在”——即使浏览器不保存表单内容浏览器刷新前填写的数据也会被部分浏览器自动恢复这会带来安全问题。收尾把票据类HTML页面的经验沉淀下来做完这个汇款单页面之后我又把它迁移到了工资条打印和采购申请单两个业务里基本只需要替换分区标题和字段名整体框架完全复用。这让我更加确信像票据、单据、凭证这类“最终要落在纸面上”的页面核心不在于用什么新潮技术而在于对纸质版式的理解、对打印细节的把控以及对会计业务规则的尊重。我个人印象最深的还是那个关于table的“返璞归真”的瞬间过去总觉得table是上个时代的产物能不用就不用但在票据场景里它就是最合适的工具。技术选型这种事真的不应该被偏见和数据指标绑架而要看使用场景到底需要什么。最后再分享一个非常实用的小技巧如果你在页面里预留了二维码或条形码位打印样式里可以先给这个区域加一个“example”水印字样比如浅灰色的“CASE NO.001”。这样做既能测试扫描设备能不能正常识别占位区域又能在正式交付前明确告诉用户“这是模板不是真的条码”。等真正接入业务系统生成动态二维码时再把这个水印移除打印样式一行都不用动。HTML汇款单这个项目本身不大但它几乎覆盖了前端开发里所有值得掌握的经典细节信息架构、语意化标签、CSS盒模型、业务规则、打印适配、用户引导。做一遍之后再遇到任何“生成一张可打印的单据”需求你的内心都会非常笃定无非是把纸质逻辑讲清楚再用浏览器把它诚实地还原出来。