别等用户投诉才发现印坏了：vibe 项目的打印输出实战

你的产品里一定有那么一个页面：用户天天在屏幕上看，却总有一天要把它印出来。发票、行程单、合同、成绩单、菜谱、登机信息——屏幕上再漂亮，印出来缺字、断行、带一堆导航按钮，用户都会觉得这个产品“没做完”。更糟的是，打印问题往往到用户投诉才暴露，因为开发者自己几乎从不点“打印”这个按钮。

本篇讲的就是怎么把“打印”当作一个正式功能来做，而不是事后打补丁。以下示例中的产品与人物均为虚构：白鹭书店是一家虚构的独立书店，店主顾南也是虚构人物，例子里的订单与金额只用来说明做法，不代表任何真实商家。

先想清楚：用户到底要印什么

动手写代码之前，先回答三个问题。第一，用户要印的是“整个页面”还是“页面里的一块内容”？发票只需要订单区域，文章只需要正文，仪表盘可能只需要一张图表。答案不同，实现方式完全不同：整页打印靠打印样式表就够了，局部打印往往需要一个专门的打印视图或者打印前临时隐藏无关区域。第二，印出来是给人看、还是给机器归档？给人看的要讲究字号、行距、留白；归档用的要讲究页眉信息完整、页码清晰、关键字段不缺。第三，打印之后还要不要在纸上继续用？比如纸质行程单要在机场出示，二维码就比一串链接有用；纸质合同要签字，签字栏的位置就要预留出来。

白鹭书店的例子很典型：顾南发现顾客经常把订单确认页截图发给财务对账，截图里混着导航栏、推荐商品和聊天按钮，财务每次都要追问“这到底是哪一单”。解决办法不是教育用户“不要截图”，而是给订单页加一个“打印订单”按钮，印出来的只有订单本身：书名、数量、单价、总价、订单号、下单时间、取书方式。用户要印的东西越明确，打印样式就越好写。

打印样式表：只写 @media print 就够了吗

对大多数 vibe 项目来说，起点就是一份 @media print 样式表。它的核心任务是做减法：把导航栏、侧边栏、操作按钮、悬浮聊天入口、广告位全部隐藏起来，只留内容本身。写法上建议用一个专门的类名来标记“只在屏幕上显示”的元素，比如把这类元素统一加上 class，然后在打印样式里写 display: none。这样做的好处是，以后新加一个按钮，只要顺手加上这个类，打印时就不会漏网。

接下来是做加法：打印时的字号、行距、颜色。屏幕上 14px 的正文印出来往往偏小，打印时可以适当放大到 11pt 到 12pt；行距可以放宽到 1.5 左右，纸上的阅读节奏和屏幕不一样。颜色方面要特别注意：浏览器默认不打印背景色和背景图，深色背景的卡片印出来可能变成白底黑字、对比度反而更好，但也可能丢掉原本用颜色区分的信息。比如“已付款”用绿色、“待付款”用橙色区分，印成黑白后就分不出来了。解决办法是不要只用颜色传达状态，旁边一定要配文字：“已付款”“待付款”这几个字印出来才作数。涉及到必须保留的颜色时，可以用 print-color-adjust: exact 告诉浏览器保留，但要提醒用户：这会多耗墨，适合发票公章、品牌标识这类非印不可的元素，不适合整页铺底色。

分页：最容易翻车的五件事

打印最常见的翻车都和分页有关。第一，表格跨页时表头消失：长表格印到第二页，用户就不知道每一列是什么意思。解决办法是给 thead 设置 display: table-header-group，让表头在每一页重复出现。第二，一行内容被拦腰截断：一段话、一张卡片印到两页各一半。可以用 break-inside: avoid 让关键块保持完整，但不要对所有元素都用，否则会留下大片空白。第三，标题和正文分离：标题在页底、正文在下一页。可以用 break-after: avoid 让标题和紧跟的内容留在同一页。第四，图片和说明分离：图表在一页、图注在下一页，同样用“避免内部断开”处理。第五，页数失控：用户只想印一页订单，结果因为页脚、推荐区没藏干净印出三页。每次改完打印样式，都要在打印预览里数一遍页数。

还有一个细节：页眉和页脚。浏览器打印时会自动加上页面 URL 和日期，有的浏览器还允许用户关掉。不要把关键信息只放在浏览器自动生成的页眉里，因为用户可能关掉它。订单号、打印时间、公司名称这些关键信息，应该作为页面内容本身印出来，放在内容区的顶部或底部，而不是依赖浏览器的页眉页脚。

链接和二维码：纸上没有超链接

屏幕上的链接在纸上是点不了的，这是打印时最容易忽略的常识。处理办法分两种。第一种是把链接的目标直接印出来：对于“查看物流”“下载电子发票”这类操作链接，可以在打印样式里用 a[href]::after { content: " (" attr(href) ")"; } 把地址跟在链接文字后面。但要注意两点：内部锚点链接（比如 #section）印出来没有意义，应该排除；太长的链接会把版面撑乱，可以只对关键链接这样做，或者改用短链接。第二种是换成二维码：行程单、取货单、活动入场凭证这类“到了现场要扫一下”的场景，二维码比一串 URL 实用得多。生成二维码时要确保它指向的是不依赖登录的公开页面，或者至少是扫码后能明确提示“请先登录”的页面，否则用户到了现场才发现扫了个寂寞。

白鹭书店的订单打印就是这样改的：订单页上的“查看物流”链接在打印版里变成了物流单号加一段简短说明，取书二维码单独放在右下角，旁边写着“到店出示此码取书”。改完之后，财务对账不再需要追问，顾客到店也不需要再翻手机找截图。

三种典型场景的清单

发票和收据：关键字段一个不能少——买卖双方名称、订单号、日期、明细、税额、总价、支付方式。金额数字要用等宽字体，避免 1 和 7、0 和 O 在打印后难以分辨；大额数字最好同时写阿拉伯数字和中文大写，或者至少加千分位分隔符。发票的打印宽度要按 A4 设定，不要假设用户用的是某种特定打印机。

行程单和凭证：核心是“一眼能找到关键信息”。出发时间、地点、订单号、二维码应该放在视觉重心，不要埋在段落里。时间要写完整，包括日期、星期、时区，避免“明天 9 点”这种依赖上下文的写法。取消政策、改签说明如果重要，也要印出来，不要只留一个“详见官网”的链接。

文章和报告：重点是可读性。去掉一切与正文无关的元素，图表要配图注，引用来源要完整，长文章要允许自然分页但避免标题落单。报告类文档建议在末尾印上生成时间与数据口径，比如“数据截至 2026 年 10 月 31 日”，这样纸质版在几个月后被翻出来时，读者仍然知道它的时效边界。

上线前的打印测试清单

打印功能上线前，至少要跑一遍这张清单。第一，用 Chrome 和至少一个其他浏览器打开打印预览，确认隐藏元素没有漏网。第二，选“另存为 PDF”，检查页数、表头重复、标题落单、链接显示。第三，找一台真实打印机印一份，确认颜色、字号、二维码可扫——屏幕预览和真实打印之间经常有差距，尤其是页边距。第四，换纸张尺寸试一次：A4 和 Letter 的宽度不同，表格列数多的页面很容易在 Letter 上溢出。第五，用长数据测一次：订单明细 50 行、文章 8000 字，看看分页是不是仍然体面。第六，检查暗色模式：用户在暗色模式下点打印，打印样式必须强制回到浅色底、深色字，不能把深色背景直接印出来。

最后说一句判断：打印不是一个“有空再做”的边缘功能，它是用户信任的最后一环。用户愿意把你的页面印出来，说明他要把这份信息带到屏幕之外：给财务、给客户、给机场工作人员、给自己存档。印出来的东西每错一处，丢掉的都是产品在真实世界里的可信度。把打印样式当作正式功能写进验收清单，花一下午跑一遍测试，换来的是用户在真实场景里不再为你的产品多费一句话。这笔买卖很值。

打印失败时的降级方案

再好的打印样式也会遇到浏览器不支持、打印机缺纸、用户不会操作的情况，所以打印功能需要降级方案。第一级降级是“另存为 PDF”：在打印按钮旁边同时提供“下载 PDF”入口，PDF 由服务端生成或者由浏览器打印生成，版式和打印版保持一致。用户没有打印机时，PDF 仍然可以转发、归档、存档。第二级降级是“发送到邮箱”：把订单、行程单以邮件形式发给用户，邮件正文里包含关键信息，而不是只放一个链接——因为用户可能在没有网络的地方打开邮件。第三级降级是“纯文本版”：对于极端情况（老旧浏览器、特殊设备），提供一个无样式的纯文本页面，至少保证关键字段齐全、顺序合理。降级方案的原则是：每降一级，丢失的应该是排版精致度，而不是信息完整性。

白鹭书店就遇到过这种情况：一位老年顾客不会用打印预览，店员直接用“发送到邮箱”把订单发到他的邮箱，他回家让家人帮忙打印。功能本身没有变复杂，但多一条路就多覆盖了一类用户。设计降级方案时，先想想你的用户里谁最可能打印失败：不会用浏览器的、没有打印机的、在弱网环境下的。给这三类人各留一条路，打印功能才算真正可用。

把打印写进验收流程

打印问题反复出现，根本原因往往不是技术难，而是流程里没有它。建议把下面三条写进团队的验收流程。第一，任何新增“用户可能需要留存”的页面（订单、合同、凭证、报告），上线检查表里必须有一项“打印预览已检查”，附上打印预览截图或者 PDF。第二，设计评审时就要问一句：“这个页面印出来是什么样子？”而不是等到开发完成才发现导航栏没藏、表格溢出。第三，每次改版动了页面结构（比如加了新的侧边栏模块、改了表格列数），都要重新跑一次打印预览，而不是假设“以前能印，现在也能印”。

还有一个组织层面的建议：指定一个人做“打印负责人”，不一定是专职，但要有人对打印质量负责。很多团队的打印问题之所以长期没人修，就是因为它不属于任何一个人的职责：前端觉得是产品的事，产品觉得是细节，细节就这样拖成了投诉。把责任落到一个人身上，问题清单、测试截图、修复记录都有了归属，打印质量才会在每个版本里缓慢变好，而不是每次都从零开始救火。打印做得好不会上热搜，但做得差一定会上用户投诉的第一名。这笔账，值得在流程里认真算一次。

写在最后：打印是产品对真实世界的承诺

屏幕上的产品活在理想世界里：网络永远在线、字体永远加载成功、用户永远按你设计的路径走。纸张属于真实世界：打印机可能缺墨、纸张可能受潮、用户可能在没有网络的地方打开文件。打印功能存在的意义，就是让产品在真实世界里仍然可靠。它不需要华丽，不需要复杂，只需要在用户最需要的那一刻——对账、登机、签约、存档——把正确的信息、完整地、体面地交到用户手里。做到这一点的方法并不神秘：想清楚要印什么、写好打印样式、处理好分页、给链接留好纸上的去处、跑一遍真实打印机测试、把打印写进验收流程。六件事做完，打印就不再是用户投诉的来源，而是产品可信度的最后一块拼图。很多产品输掉用户信任，不是因为核心功能差，而是因为这些“最后一公里”的细节没人管。打印，就是其中最典型的一公里。

打印样式的调试技巧

打印样式最难的地方是调试：你不能像调普通样式那样直接在页面上看到效果，必须借助浏览器的打印仿真。Chrome 开发者工具里可以开启“渲染”面板中的“模拟 CSS 媒体类型 print”，让页面直接按打印样式显示，不用每次都打开打印预览。这个功能适合快速迭代：改一处样式、看一眼效果、再改一处。但要注意，仿真只能模拟样式，不能模拟真实分页——最终的分页效果还是要在打印预览里确认。

调试时还有几个实用技巧。第一，给打印样式单独建一个文件，比如 print.css，只在媒体类型为 print 时加载，这样屏幕样式和打印样式不会互相干扰，排查问题时也更容易定位。第二，用边框临时标出打印区域：在调试阶段给内容区加一个明显的边框，确认哪些元素被隐藏、哪些被保留，调完再去掉边框。第三，准备三组测试数据：最短数据（只有一行订单）、正常数据（十几行）、最长数据（几十行加长备注），三组都印一遍，很多分页问题只在极端长度下才会出现。第四，记得测“用户自己改了页边距”的情况：浏览器允许用户调整页边距，版面不能假设页边距永远是默认值，表格和关键区块要留出弹性空间。这些技巧都不复杂，但能把打印调试从“反复开关打印预览的折磨”变成“有章法的检查流程”。

再补一个容易被忽略的场景：用户打印的不是你的页面，而是你的邮件。订单确认邮件、行程通知邮件，经常会被用户直接打印出来。邮件的打印样式和网页不同：邮件客户端对 CSS 的支持参差不齐，复杂的布局在打印时很容易错乱。给邮件做打印适配的原则是“宁简勿繁”：单列布局、大字号、关键信息放在最前面、不要依赖背景色和复杂表格。网页打印做得再好，如果邮件一印就乱，用户记住的仍然是“这个产品印出来是乱的”。所以验收清单里应该把“重要邮件的打印效果”也加进去，至少对订单确认、行程通知这两类邮件跑一次打印预览。