A4 PRINT READY

简历模板集合 · 6 套

六套版式共用同一份示例内容(张明 / 高级前端开发工程师),方便你直接对比排版差异。 每一份都是单文件、零依赖的 HTML —— 双击用浏览器打开,Ctrl + P 即可按 A4 打印或另存 PDF。

六套都已用无头 Chrome 真实导出验证过:全部严格落在 1 页 A4 之内, 底部还留了 11.7–27.7mm 的余量,换打印机也不会多出空白第二页。

6 套
版式,覆盖不同行业偏好
1 页 A4
全部实测通过,无溢出
0 依赖
单文件,不联网不装字体

选一个开始

01实测通过

经典单栏

最保险的版式。深蓝主题、姓名左上、联系方式右上、色块小标题,招聘方一眼读完。没有花活,也不容易出错。

国企 / 银行事业单位校招通用
底部余量 23.9mm正文 10pt
02实测通过

左侧栏双栏

深色侧栏承载联系方式、技能条、证书,右侧留给经历。信息分区最清楚,互联网岗位接受度最高的形式。

互联网技术岗产品 / 设计
底部余量 19.1mm侧栏 64mm
03实测通过

时间轴

用一条竖线把学历、工作、重点项目串成脉络,突出成长路径。适合经历条线清晰、跳过 2–3 次槽的人。

成长脉络技术 / 运营
底部余量 27.7mm主题色 墨绿
04实测通过

极简衬线

衬线字体、宽字距小标题、几乎不用色块。气质克制,适合科研、高校、咨询、法律与博士申请。

学术 / 科研咨询 / 法律不怕漏背景色
底部余量 26.4mm行高 1.5
05实测通过

顶部横幅 + 卡片

渐变横幅打头,紧跟四个数字亮点,底部技能卡片。视觉冲击最强,适合产品、运营、设计、市场等展示型岗位。

视觉冲击需开背景图形
底部余量 11.7mm已留安全边界
06实测通过

紧凑双栏

正文两栏流式排版,信息密度最高。给经历多、项目多的人用,一页塞不下的内容也能自然延展到第二页。

内容量大可多页
底部余量 15.0mm正文 10.1pt

打印设置(一次设好,以后都用)

  1. Chrome / Edge 打开 HTML 文件(PDF 导出质量最好,别用 IE 内核浏览器)。
  2. Ctrl + P 打开打印对话框,目标选「另存为 PDF」或你的打印机。
  3. 纸张尺寸选 A4,方向纵向
  4. 「页边距」选 无 / None(页边距已经写在 CSS 里了,选别的会叠加)。
  5. 「缩放」保持 100%,不要勾「适合页面」,否则字号会被二次压缩。
  6. 展开「更多设置」,务必勾选 背景图形 / Background graphics
  7. 取消勾选「页眉和页脚」,否则纸上会出现网址和日期。
最容易踩的坑:背景图形没勾。 模板 02、05 依赖色块(深色侧栏、渐变横幅),不勾这一项打印出来会变成大片空白,看起来像排版坏了 —— 其实是打印选项的问题。模板 04 完全不含底色,属于「怎么打都不会走形」的兜底选择。
打印前先选「另存为 PDF」导出看一眼,确认是一页、没有空白第二页,再送去实际打印。 preview-pdf/ 里已经放好六套的导出结果,可以先拿来对一下。

实测校验结果

做法:用无头 Chrome 把每套模板按 A4(210 × 297mm)、页边距 0、100% 缩放、保留背景色,真实渲染成 PDF, 再统计页数与正文最后一行的落点。下面数字是实测值,不是估算。

模板正文止于底部余量PDF 页数结论
01 经典单栏273.1mm23.9mm1通过
02 左侧栏双栏277.9mm19.1mm1通过
03 时间轴269.3mm27.7mm1通过
04 极简衬线270.6mm26.4mm1通过
05 顶部横幅 + 卡片285.3mm11.7mm1通过
06 紧凑双栏282.0mm15.0mm1通过

「底部余量」= 297mm 减去正文最后一行所在位置,代表换成别的打印机、别的 Chrome 版本时还剩下多少容错空间。 普遍认为 8mm 以上是安全区,六套都在 11.7mm 以上。

换成你自己的内容

常见问题

现象原因怎么改
多出一页空的或只有一两行 内容刚好超过一页高度 删掉 1–2 条次要经历,或把 bodyfont-size 降 0.2pt
整体偏挤 / 偏空 字号与内容量不匹配 body { font-size };也可改 .page { padding } 的上下值(默认 14–15mm)
色块不见了 打印设置未勾背景图形 见上方第 6 条;或改用模板 01 / 04
字体和你电脑上的不一样 用了系统未装的字体 模板已按 PingFang SC → 微软雅黑 顺序回退,Windows 上会落到雅黑,无需装字体
某段经历被切到第二页中间 分页位置落在条目内部 已通过 break-inside: avoid 处理;若仍发生,在该条目前插入 <div style="break-before:page"></div> 手动分页
想改成两页的详细版 内容确实放不下 用模板 06,它本来就是为多页设计的;或把 .pagemin-height 去掉,让内容自然分页