HTML简历打印需适配@media print：强制单列布局、A4尺寸声明、隐藏非内容元素、链接补URL、表格图片防断页，并导出PDF时关闭背景图形、设100%缩放和无边距。
HTML简历打印样式不是加个 window.print() 就完事的——没做 @media print 适配，90% 的简历在打印时会丢内容、断表格、挤成一页半或第二页只剩两行。
为什么直接打印 HTML 简历大概率失败
浏览器默认把网页当“屏幕内容”渲染，而纸张是固定尺寸、无滚动、无交互的物理媒介。常见翻车点包括：
-
flex或grid布局在打印时塌缩或错位（尤其侧边栏+主内容两栏结构） - 表格跨页被硬生生劈开，第二页只剩几行表头
- 字体单位用
rem或em，打印时缩放失准，字号忽大忽小 - 背景色、图标、阴影全被带进打印，要么糊成一片，要么被打印机自动过滤导致留白错乱
- 链接不显示 URL，纸质版里“详见项目主页”变成一句无效话
必须写的三段 CSS 打印规则
把下面这段代码塞进 标签或外部 print.css，覆盖掉所有屏幕样式干扰：
@media print {
/* 强制重置布局，禁用弹性/网格 */
* {
break-inside: avoid !important;
orphans: 3;
widows: 3;
}
body {
font-size: 12pt;
line-height: 1.4;
color: #000;
background: #fff;
}
/* 隐藏所有非内容元素 */
.no-print, nav, header, footer, aside, .button, .social-links {
display: none !important;
}
/* 链接补 URL，方便纸质查阅 */
a[href]:after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
/* 表格、图片、标题防断页 */
table, img, h1, h2, h3 {
page-break-inside: avoid;
}
}
注意：break-inside: avoid 比旧式 page-break-inside: avoid 兼容性更好，Chrome/Firefox/Edge 均已支持；orphans/widows 控制段落分页时最少保留行数，避免孤行出现在页首/页尾。
@page 规则必须显式声明 A4 尺寸
很多简历模板默认用 Letter（8.5×11 in），国内打印机普遍认 A4（210×297mm）。不声明就容易内容被裁或留大片空白：
@page {
size: A4 portrait;
margin: 1.5cm;
}
/* 首页可略宽松，后续页紧凑些 */
@page :first {
margin-top: 2cm;
}
关键点：
-
size: A4必须小写，写成A4或a4都行，但Size: A4（首字母大写）无效 - 不要依赖浏览器“自动缩放”，
margin设为1.5cm是实测最稳的值——太小易被打印机硬件裁边，太大浪费纸面 - 如果简历有两栏（如左侧技能栏+右侧经历），打印前务必用
display: block强制转单列，否则右栏内容大概率消失
导出 PDF 时最容易忽略的三个动作
用 Chrome “另存为 PDF” 虽快，但默认设置会悄悄破坏排版：
- 在打印对话框中，手动把“边距”设为
无或最小，否则浏览器会叠加一层额外页边距 - 务必关闭
背景图形开关——否则灰色底色、浅蓝链接色全变黑块，且耗墨 - 缩放选
100%，别信“适合页面”，它会压缩字体和间距，让中文字符挤在一起
真正稳定的流程是：先在 Chrome 打印预览里确认分页正确 → 关闭背景图形 + 设 100% 缩放 → 另存为 PDF → 用 Acrobat 打开再检查一次第一页和最后一页是否完整。A4 尺寸、无背景、单列、链接带 URL——这四点对齐了，纸质版才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
