打印页面设计要先确定“打印哪些数据、给谁使用”，再处理纸张和分页。屏幕上的导航、筛选器与编辑按钮通常无需印出，但单据编号、字段单位、生成时间和明细范围必须保留。长表格应考虑重复表头，金额合计与签字区避免被拆到难以核对的位置；不能靠把整张网页缩小来塞满一页。
以采购单为例：屏幕帮助采购员检索和修改，纸张要让仓库按项核对、财务按金额确认。可以用墨刀设计排出屏幕页与打印页，在同一份设计中比较信息取舍、表格宽度和跨页关系，然后再由研发实现打印样式。
先把“打印当前页”说清楚
采购列表显示第1页20条记录，筛选结果共48条。用户点击“打印”，究竟得到这20条、全部48条，还是勾选的5条？这不是排版细节，而是单据是否完整的业务问题。按钮旁边应明确范围，例如“打印所选5项”；需要选择范围时，在打印前让用户确认。
本例打印对象是一张采购单，单号PO-20261018-01，包含48项物料。单据标题下显示供应商、采购日期和币种；页尾汇总全部48项金额。列表分页只是屏幕呈现方式，不能悄悄成为纸张的数据边界。若数据没有加载完整，就应先准备完整单据，不能直接打印当前滚动区域。
打印快照也要一致：第一张纸和最后一张纸应来自同一份单据数据。用户预览期间有人修改数量，应提示重新生成，或在预览中固定已生成版本并显示生成时间。不要出现前页明细还是旧数量，末页合计已经更新的情况。
一张纸上必须独立读懂什么
纸张会离开系统，也可能被拆开流转。仅有产品名和金额，第二页的读者很难判断是哪张单。建议把单号、文档标题或简短主体信息作为持续识别线索；如果需要“第2页/共3页”，应与研发确认最终生成方式能够稳定输出页码，不先在设计稿里承诺浏览器做不到的效果。
| 屏幕元素 | 打印处理 | 本例原因 |
|---|---|---|
| 导航、筛选、分页、操作按钮 | 删除交互控件；保留筛选范围的文字结果 | 纸上无法点击，但读者仍需知道明细范围 |
| 状态标签、颜色标记 | 保留状态文字，黑白打印也能区分 | “已确认”不能只靠绿色底色表达 |
| 单号、供应商、日期、币种 | 放到标题下；必要身份信息在后续页重复 | 纸张被拆开后仍能归属同一张采购单 |
| 明细、数量、单价、金额 | 保留列名、单位、精度和可读宽度 | 收货与财务需要逐项核对 |
| 附件入口、审批详情链接 | 重要结论直接写出；按需保留短链接或二维码 | 纸上不能用“查看详情”代替关键审批结论 |
信息不是越全越好。内部备注、个人联系方式和权限字段，需要按纸张的使用对象重新判断。线上隐藏了敏感列，却在打印模板中输出，是很常见的遗漏；打印和导出应采用同一套明确的数据授权规则。
用纸张可用宽度分配列，不按屏幕比例缩小
A4纵向纸张为210毫米×297毫米。若本例左右各留15毫米，可用宽度是180毫米。先把这些空间分给需要核对的字段，再决定字号和换行。打印机的可打印区域、装订与留存要求可能不同，设计稿中的边距是起点，最终要用目标设备确认。
本例可将序号、名称及规格、数量、单位、单价、金额分配为10、70、18、12、32、38毫米，总计180毫米。名称列允许多行，数字列右对齐，单位独立显示。这样长产品名不会挤掉金额，也不需要把所有字段缩成很小的字。
若规格仍然太长，优先将规格放到名称下方，而不是直接截断。货号、银行账号等必须完整核对的字符串不宜使用省略号。确需保留更多列时，可以选择横向纸张、拆出附表，或按任务分别生成收货版和财务版；不同版本必须标明用途，避免两份看似相同却信息不一致的单据混用。
字号可以先从正文10.5至12磅试排，再用实际打印结果判断；这只是常见业务单据的设计起点，不是通用标准。表头、合计、正文靠层级和留白区分，减少细灰线与浅色底，黑白打印也应保持可辨认。
长表格的难点是行、表头和合计如何跨页
屏幕可以向下滚动，纸张却会截断连续内容。设计稿至少要包含一张第一页和一张后续页，而不只展示前8行的漂亮样本。把48项中的几条替换为长名称、多行规格和大额金额，更容易发现真实的边界。
- 表头：每页明细开头继续显示列名和单位，避免读者翻回前页猜数字含义。
- 普通明细行：尽量完整放在同页，防止名称与数量被拆开。但单行高于整页可用区域时，必须允许续排或改用附页，不能简单禁止所有行跨页。
- 分组：不要把“办公设备”组名孤零零留在页底；至少与下一条明细一起出现。跨页的同一分组可标“续”。
- 合计：仅在约定位置显示全单合计；若另有页小计，应明确标成“本页小计”，避免被误当成应付总额。
- 签字区：与合计或最少的单据身份信息同页。空间不足时整体移到下一页，不能只留下空白签名框而没有单号。
一个常见误修是给所有区块都加“禁止分页”。它可能把大块内容整体推到下一页，前一页留下大片空白，甚至无法完整排出。应按内容选择：短签字区适合整体保留，数十行明细必须允许正常跨页。MDN的break-inside说明介绍了区块内部的断页控制；具体结果还受内容尺寸和分页算法影响。
浏览器打印还是生成PDF，取决于版式约束
业务表单布局相对简单、用户需要直接打印时，可以为网页增加打印专用样式。MDN打印指南说明了通过print媒体样式切换显示内容，以及用@page设置纸张方向、尺寸和边距的方法。设计交付应区分“屏幕显示”和“打印显示”，不要只把截图扔给研发。
打印样式还要取消屏幕上的固定高度和内部滚动区域。明细容器若仍只有400像素高，纸上可能只输出视口内的一部分；固定顶部工具栏也可能遮住跨页内容。这些问题要在打印预览里看，而不能凭正常浏览网页判断。
如果业务要求严格页码、固定签章位置、可追溯的留存文件或统一批量输出，可评估专门的PDF生成方案。它增加了模板、字体与生成服务的维护成本，但能让版式规则集中管理。此时先生成完整文件再打印，界面应展示生成状态和失败处理；“打开了打印对话框”并不代表文件已成功打印。
浏览器自带页眉页脚、背景打印选项、纸张与缩放设置可能影响结果。原型中可以提醒用户选择匹配纸张，并提供预览，但不要承诺网页能覆盖所有用户打印设置。
用六组数据把采购单走到最后一页
完成首版后，分别准备：只有1条明细、48条明细、超长名称、包含多行备注、大额与小数金额、无可打印记录。空记录时应提示没有数据，而不是弹出一张只有表头的空白单。大额金额用来验证列宽和小数位，多行备注用来验证分页，不要全部替换为“测试商品”。
然后按顺序查看：第一页身份信息是否完整；第二页是否继续出现表头和单号；最后一条明细与全单合计是否一致；签字区有没有单独悬空；转成黑白后状态和分组还能否区分。用目标浏览器的打印预览检查一次，再实际打印或输出PDF检查比例、边距与字体，二者发现的问题并不完全相同。
给研发的采购单规则可以写成：“打印当前单据全部48项；按生成时快照取数；A4纵向，左右各15毫米；名称允许换行；数量与金额不省略；后续页重复表头和单号；末页显示全单合计并保留签字区；空单不进入打印。”具体数值和业务字段按实际单据调整。
在墨刀中把屏幕页、首页、续页和末页摆在一起，让采购、仓库与研发分别寻找他们关心的信息。纸张上的每一项保留或删除都有明确用途，打印设计才能从“页面能印出来”走到“拿在手里能完成工作”。
