企业官网建设流程全解析

说实话，我第一次接到“用HTML做银行汇款单”这个需求时也愣了一下。平时写网页都是按钮、导航、卡片，突然要还原一张银行的单子，第一反应是：这玩意儿用Word不香吗？等我真正做完整套流程才发现，HTML做汇款单这件事，远不止复刻一张纸那么简单，它天然适合流程自动化、批量生成和网页预览，尤其是当单据要嵌进业务系统、需要动态填数、还要一键打印盖章的时候，Word根本没法比。

这篇文章我会从字段设计、Table布局、金额大小写转换、打印适配，再到工程化扩展，把整条思路完整走一遍。适合刚接触HTML表单的人，也适合想把单据类页面做得更规范的前端开发参考。

1. 银行汇款单的本质：字段、结构、票据思维

1.1 一张汇款单到底有哪些内容

银行汇款单属于典型的“票据型表单”，它的信息密度很高，几乎所有字段都有固定位置，不能像普通网页一样随便换行。拆开看，主要分为几大块：

• 汇款人信息：户名、账号、开户行名称、证件号码等
• 收款人信息：户名、账号、开户行名称、汇入地点等
• 汇款信息：币种、金额（小写）、金额（大写）、汇款用途、附言
• 业务信息：日期、凭证编号、经办柜员、复核、打印时间等

做HTML版本之前，建议先把字段清单列出来，不要边写边加。我踩过最大的坑就是写到一半发现少了一个“汇入地点”，最后重新调整表格行高和跨列，白费了不少功夫。

1.2 为什么这个场景适合HTML

Word做一张静态汇款单没问题，但一旦涉及批量生成、条件判断、数据联动，HTML的优势就出来了。比如前端可以实现用户输入小写金额后自动显示大写，这比Excel公式还灵活；后端返回一批订单数据，前端循环渲染几十张汇款单，也只是一个模板循环的事。

打印效果是另一个关键点。HTML的@media print规则可以精确控制打印区域、纸张大小、缩进和隐藏元素。相比其他排版工具，HTML在“屏幕预览”和“纸张输出”之间切换更顺滑，所见即所得程度高，调起来也更直观。

2. 动手前的关键准备：骨架、样式和整体布局

2.1 页面基础骨架与语义化容器

先把最基础的HTML结构立起来。不要急着一个table塞到底，票据也是有大区块的，分块后更容易控制间距和对齐。

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>银行汇款单</title> <style> /* 样式集中托管 */ </style> </head> <body> <div class="remit-wrap"> <div class="remit-head">银行汇款单</div> <div class="remit-form"> <!-- 表格主体 --> </div> <div class="remit-footer"> <!-- 签名区、流水号等 --> </div> </div> </body> </html>

外层的remit-wrap等于一张“纸”，后续所有打印缩放、页面边距都作用在它上面。表头和表体分开，方便以后做批量输出时循环只重复表体。

2.2 别忽视一个最小化的CSS Reset

单据类页面最容易出现的毛病就是不同浏览器默认边距不一样，尤其是Chrome和Firefox对body的margin默认值有差异。我做这类页面时，习惯先做一次最小化重置：

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f0f0f0; } .remit-wrap { width: 210mm; min-height: 120mm; margin: 20px auto; background: #fff; padding: 12mm 15mm; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }

宽度用210mm，是对标A4打印纸的常用宽度，屏幕上看是一张卡纸，打印时也能基本1:1还原。给外层加上浅灰背景和白色纸张的对比，是为了开发时看得清楚边界，上线后如果不需要可以直接去掉。

3. 核心实战：用Table逐格还原汇款单

3.1 单据场景里，Table依然是合适的工具

现在很多人谈table色变，觉得布局就应该用flex和grid。但在汇款单这种场景里，表格本身有两个不可替代的优势：一是天然模拟网格，单元格对齐和跨行列用colspan、rowspan处理极其方便；二是打印兼容性极好，老浏览器和新浏览器都能稳定渲染。

我的建议是：页面外围布局你可以用div加flex，但单据主体一律用table。这不是技术倒退，而是选对工具。汇款单的银行数据本身就是二维关系，用表格表达最符合直觉。

3.2 表格结构拆解与代码实现

以一张简化版但信息完整的汇款单为例，我用border属性模拟实物票据的复杂框线。注意这里要用border-collapse: collapse，否则单元格之间会变成双线，打印出来报纸感十足。

<table class="remit-table"> <tr> <td class="label" rowspan="2">汇款人</td> <td class="label">户名</td> <td class="value" colspan="3">张明</td> </tr> <tr> <td class="label">账号</td> <td class="value" colspan="3">6225 0000 1234 5678</td> </tr> <tr> <td class="label" rowspan="2">收款人</td> <td class="label">户名</td> <td class="value" colspan="3">李华</td> </tr> <tr> <td class="label">账号</td> <td class="value" colspan="3">6222 0000 9876 5432</td> </tr> </table>

配合的CSS这样写：

.remit-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4mm; } .remit-table td { border: 1px solid #333; padding: 6px 10px; line-height: 1.6; } .label { width: 14%; text-align: center; background: #fafafa; } .value { width: 18%; text-align: left; font-weight: 600; }

要特别注意rowspan的写法：第一行的“汇款人”单元格高度跨两行，那么第二行就不需要再写这个格子，但第二行的td数量要对应扣掉一个。刚上手时容易把这搞错，最后表格会歪，最好的自查方法是打印预览里看边框是否连续。

3.3 汇款单里的“金额大小写”区域如何排布

金额区域是整张单子里最容易让人纠结的部分。实物单通常左侧是大写金额，右侧是小写金额，下方还有币种和用途。实现上最稳的方式还是table两行三列，列宽用百分比控制：

<tr> <td class="label">币种</td> <td class="value">人民币</td> <td class="label">金额大写</td> <td class="value amount-upper">壹万元整</td> </tr> <tr> <td class="label">金额小写</td> <td class="value amount-lower">¥10000.00</td> <td class="label">汇款用途</td> <td class="value">货款</td> </tr>

如果你追求实物单那种“金额紧靠左边，后续用整字填补空白”的效果，可以在金额容器上做一点小技巧：

.amount-lower { letter-spacing: 2px; border-bottom: 2px solid #333; font-weight: bold; }

我在实际测试中发现，border-bottom模拟下划线比直接画一个独立线条更贴合表格，打印出来也不会有错位。

4. 动态能力：金额大写自动转换与实时预览

4.1 小写金额转中文大写，逻辑其实不复杂

用户在页面里输入数字，实时转换成大写，是HTML汇款单最有价值的功能之一。网上模板很多，但很多都处理不好“零”的进位。我直接把能用的函数贴出来，并且做了边界处理。

function digitToUpper(n) { const nums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]; const units = ["", "拾", "佰", "仟", "万", "拾", "佰", "仟", "亿"]; const decimals = ["角", "分"]; let str = String(Math.floor(n * 100)); let result = ""; let prevZero = false; if (isNaN(n) || n < 0) return ""; const intPart = Math.floor(n); const decPart = Math.round((n - intPart) * 100); const intStr = String(intPart).split("").reverse(); for (let i = 0; i < intStr.length; i++) { const digit = parseInt(intStr[i]); if (i >= units.length) break; if (digit === 0) { if (!prevZero) result = "零" + result; prevZero = true; } else { result = nums[digit] + units[i] + result; prevZero = false; } } result = result.replace(/零+$/, ""); let upperInt = result || "零"; if (decPart === 0) { return upperInt + "元整"; } let decStr = ""; if (decPart >= 10) { decStr += nums[Math.floor(decPart / 10)] + "角"; } else { if (intPart > 0) decStr += "零"; } if (decPart % 10 !== 0) { decStr += nums[decPart % 10] + "分"; } return upperInt + "元" + decStr; }

这个函数不是银行业的正式验算逻辑，但应付页面展示已经足够。需要注意：浮点数计算有精度问题，实际生产环境要先把金额乘以100再取整，避免0.29变成0.289999这种尴尬情况。测试用例至少覆盖1000、10001、0.5、10.09这几个典型场景。

4.2 输入面板与票据区实时联动

为了让效果直观，我在页面上放了一个简易输入面板，右侧才是仿真单。这叫“表单驱动预览”，优点是你改一个字段，单据区域同步变，不用反复刷新。

<div class="control-panel"> 户名：<input id="payerName" value="张明"> 金额：<input id="money" value="10000"> </div>

const nameInput = document.getElementById("payerName"); const moneyInput = document.getElementById("money"); nameInput.addEventListener("input", function() { document.getElementById("displayName").textContent = this.value; }); moneyInput.addEventListener("input", function() { const val = parseFloat(this.value) || 0; document.getElementById("displayMoney").textContent = val.toFixed(2); document.getElementById("displayUpperMoney").textContent = digitToUpper(val); });

这里的逻辑是：输入面板只是数据源，不要直接修改右侧表格里的value内容，而是通过DOM更新。这样代码分离，数据结构也清晰。以后接后端接口时，只需要把input换成接口返回的数据就行。

4.3 一键打印：window.print与打印样式适配

做打印页面，测试的重点不在屏幕，在打印预览。常用的打印实现方式是调用window.print()，再配合CSS的@media print来做打印专属的隐身术。

@media print { body { background: #fff; margin: 0; } .control-panel { display: none !important; } .remit-wrap { width: 100%; margin: 0; box-shadow: none; padding: 0; } }

把输入面板整个隐藏，纸张边缘的阴影也去掉，让单据区域占满整个打印区域。这里要注意：不要用display: none去隐藏整张纸本身，而是隐藏与纸无关的内容。窗口上方的打印设置建议选择“默认边距”或“无边距”，具体看打印机支持情况，我实测大多数场景下“默认边距”就够了。

5. 实战中遇到的典型问题与排查方法

5.1 表格边框打印时出现错误

第一个遇到最多的问题，是表格边框在打印预览里出现重叠或错位。原因是默认table的边框是分开的。解决方案很简单，在表格样式里加一行：

table { border-collapse: collapse; }

还有一个细节，如果你在td上设置border，又额外在table上设置border，打印时可能出现双线，更稳妥的做法是统一在td上设置边框，table本身不设外边框，让所有格子自带边界，表格整体线条才会干净。

5.2 打印时内容被截断或整体缩放

如果预览时发现整张表被缩小到左边一角，多半是页面的@page尺寸没有设置好。补充一下：

@page { size: A4; margin: 5mm; }

如果依然太小，检查是否使用了transform: scale()。有些同学喜欢用scale(0.8)把屏幕上的大纸张缩进预览，但打印时会出问题。我的建议是不要对整张纸做缩放，而是通过调整width和font-size来控制纸张内容大小，打印才稳定。

5.3 金额大写在Edge里显示为乱码或错位

这个其实不是JS的问题，而是字体的锅。中文大写金额如果使用英文优先的字体栈，可能导致某些符号宽度异常。给金额区域单独指定中文字体：

.amount-upper { font-family: "SimSun", "宋体", "Microsoft YaHei", serif; letter-spacing: 1px; }

乱码通常不是字体缺失造成的，而是字符编码不一致。HTML里已经写了charset="UTF-8"，但如果你的编辑器保存文件时用了GBK，就会出现乱码。统一把项目文件存成UTF-8无BOM格式，基本能解决绝大多数乱码问题。

5.4 单元格高度不均，导致整表看起来歪

单元格里内容多少不同，行高会自动被撑开。真实票据最好让同一行信息整体等高。处理方式有两种：一是给表格加table-layout: fixed，固定列宽，内容超出才撑破；二是给对应行设置一个height，比如40px。我个人优先用table-layout: fixed，再结合文字溢出省略，至少预览时不会出现一边高一边低的尴尬。

6. 进阶玩法：从静态单子到可复用模板

6.1 套进服务端模板，批量生成汇款单

页面写好后，动态数据直接对接业务系统。比如后端传一批汇款订单，前端循环渲染表格行，就能一次性生成几十张预览单。如果不想动后端，也可以在Node.js环境用模板引擎编译HTML片段，配合无头浏览器输出PDF。

一个简单的思路是用map循环生成多个汇款单容器：

const orders = [ { name: "张明", account: "6225000012345678", amount: 10000 }, { name: "李华", account: "6222000098765432", amount: 25000 } ]; orders.forEach((item) => { const node = document.querySelector(".remit-wrap").cloneNode(true); node.querySelector(".name").textContent = item.name; node.querySelector(".account").textContent = item.account; document.body.appendChild(node); });

这种方式适合“多单预览、一次打印”的场景，但要注意克隆后每个节点的id会重复，所以模板里尽量用class选择器而不是id。

6.2 用CSS变量实现多银行模板切换

不同银行汇款单的边框、标题颜色、Logo风格都可能不同。如果只做一份模板，后续适配很痛苦。用CSS变量可以优雅解决：

:root { --primary-color: #005bac; --header-font-size: 22px; --border-color: #333; } .bank-cmb { --primary-color: #da2128; } .bank-ccb { --primary-color: #0c4da2; } .remit-head { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }

切换时只需要给最外层容器加一个bank-cmb或bank-ccb类，颜色、标题风格整体联动，不需要再改具体样式。这个方式比写多套CSS文件省心太多。

6.3 打印后自动生成PDF的延伸

若需要把汇款单作为电子凭证保存，可以在浏览器端使用无头浏览器的打印能力来生成PDF，或者通过系统自带打印对话框选择“另存为PDF”。不建议前端单独引一个巨大的PDF库去画单子，维护成本很高。合理路线是：HTML展示 + 浏览器打印/无头导出，既保留模板灵活性，也保证最终文件可归档。

最后再分享一个我自己调页面的小习惯

做这类票据页面，我强烈建议你在开发时装一个“打印预览”按钮，快捷键模拟Ctrl + P，每次都通过打印预览来检查排版，而不是只看浏览器可视区域。很多在屏幕上看起来正常的间距和边框，到了打印预览里会被浏览器重新计算，差距非常大。我一般是先把内容字写死，固定所有字段后再调样式，最后再做数据联动。顺序反过来的话，你会一边调样式一边被动态数据带偏，既慢又容易出bug。

这个项目做完后，我最大的感受是：HTML做银行汇款单根本不是把Word复制到网页里，而是一种更接近“票据生成器”的思路。只要结构选对、打印适配到位、数据处理好，它既能当静态模板，也能成为业务系统里的标准化输出模块。希望这篇文章能把你想踩的坑提前排掉，动手做的时候少走点弯路。