从零搭建一个可视化简历海报生成器

从零搭建一个可视化简历海报生成器

背景

每次换季找工作，简历排版都要折腾很久。Word 模板不够灵活，设计软件学习成本高，在线简历网站又要付费。于是我想：能不能做一个工具，选个模板、填好内容，实时预览，一键导出 PDF 或图片？

这就是「简历海报生成器」的由来。

我想做什么

核心需求其实很简单：

• 选一套好看的模板
• 把个人信息填进去
• 右边实时看到效果
• 满意了就导出 PDF 或 PNG

但光做简历还不够。同样的排版引擎，换个模板就能做活动海报、邀请函。所以我把设计扩展成了「多模板生成器」。

技术选型

前端用 React 加 Vite，开发体验好，热更新快。样式用 Tailwind CSS，写起来快，也不用纠结 class 命名。导出功能用 html2canvas 截图再配合 jsPDF 生成 PDF，虽然不是矢量级精度，但对于简历这种以文字和色块为主的场景完全够用。

TypeScript 是必须的。简历数据结构嵌套深（基本信息、教育经历、工作经历、技能列表），没有类型约束很容易写错字段名。

架构设计

整个应用分三个区域：顶部工具栏、左侧编辑区、右侧预览区。

工具栏负责模板切换、配色方案选择、字体组合选择和导出操作。编辑区是表单式的，按模块分块——基本信息、教育经历、工作经历、技能，每块可以增删条目。预览区按 A4 比例渲染，内容多了自动分页。

数据流是单向的：编辑区修改数据，数据传给预览区，预览区根据当前选中的模板重新渲染。没有 Redux 或 Zustand，就是 React 的 useState 加 props 传递，对这个规模的应用足够了。

模板系统

这是最核心的部分。我定义了一个统一的数据接口，所有模板都接收同一份数据，但各自决定怎么渲染。

一共做了四套模板：

现代简约模板用大量留白和细线条，配色克制，适合程序员和产品经理。经典商务模板走传统简历的路子，衬线字体加深色配色，适合金融、咨询行业。创意杂志模板大胆用色块和大号标题，排版有杂志感，适合设计师。优雅邀请函模板加了装饰性边框和花纹元素，用来做活动邀请函。

每套模板都是一个 React 组件，接收 ResumeData 类型的 props。模板内部自己处理分页逻辑——内容超过一页就拆分成多个页面渲染。

配色与字体

配色方案我预设了六套：深蓝、墨绿、酒红、炭灰、暖棕、雅紫。每套配色包含主色、辅色、文字色、背景色四个变量，模板里所有颜色都引用这些变量，切换配色就是换一组变量值。

字体组合预设了四套：经典衬线（宋体加 Times）、现代无衬线（黑体加 Inter）、杂志混排（标题用衬线正文用无衬线）、极客等宽（等宽字体加代码风格）。字体通过 CSS 变量注入，切换字体就是改一组变量。

实时预览

预览区是一个固定宽度的容器，按 A4 的 210 毫米比 297 毫米比例设置。模板渲染出来的内容放进去，超出部分自动分页。

分页的实现思路是：模板组件接收数据后，先渲染全部内容到一个虚拟容器，测量每个区块的高度，按 A4 高度切分成多页。每页渲染为一个独立的 div，用户可以翻页查看。

缩放功能用 CSS transform scale 实现，不影响实际布局，只是视觉上缩小或放大。

导出功能

导出 PNG 比较直接：用 html2canvas 把预览区的 DOM 转成 canvas，再调 toDataURL 得到图片。

导出 PDF 稍微复杂。单页情况下直接把图片放进 PDF。多页情况下，每页单独截图，每页对应 PDF 的一页，用 jsPDF 的 addImage 逐页添加。

有个细节要注意：html2canvas 对某些 CSS 属性支持不好，比如 background clip text。模板里尽量避免用这类属性，或者提供降级方案。

遇到的坑

第一个坑是字体加载。自定义字体需要确保加载完成后再截图，否则导出的 PDF 里字体是错的。解决方案是调用 document.fonts.ready 这个 Promise，等所有字体加载完再执行截图。

第二个坑是分页边界。内容刚好卡在分页线上时，区块会被截断。我加了一个简单的避让逻辑：如果某个区块底部离分页线很近（小于 20 像素），就把它整体推到下一页。

第三个坑是 Tailwind 的 JIT 编译。动态拼接的 class 名（比如根据配色变量生成的 class）不会被 Tailwind 识别。解决方案是改用 CSS 变量加内联样式，不依赖 Tailwind 的动态 class。

项目结构

整个项目的文件组织遵循关注点分离原则。模板文件统一放在 templates 目录下，每个模板一个文件，加一个共享组件文件和一个渲染器。数据定义放在 data 目录，包括配色方案、字体组合、模板元数据和示例数据。组件放在 components 目录，分别是工具栏、编辑器和预览器。导出逻辑独立到 utils 目录。

这样组织的好处是加新模板时只需要在 templates 目录加一个文件，在 data 目录的模板元数据里注册一下，其他地方都不用改。

最终效果

打开应用，默认加载现代简约模板和示例数据，右侧立刻显示一份完整的简历。顶部可以切换四套模板、六种配色、四种字体。左侧编辑区修改任何字段，右侧实时更新。点导出按钮，选择 PDF 或 PNG，文件直接下载到本地。

从空白项目到能用的产品，大概花了半天时间。React 加 Vite 的开发体验确实好，保存即热更新，改模板的时候几乎不用等。

总结

这个项目没有用什么高深的技术，就是 React 基础加一些 CSS 动手能力。但它解决了一个真实的需求：让不会设计软件的人也能做出好看的简历和海报。

如果你也想做一个类似的东西，我的建议是先把数据结构定好，再写模板。数据结构是地基，地基不稳后面全乱。模板是地面上的房子，可以随时加、随时改。

项目的完整代码已经开源，欢迎参考。