名片 PDF 批量生成：前端一键导出完整指南

销售团队、HR 部门和新员工入职流程中，批量制作名片是高频需求：几十人甚至上百人的姓名、职位、电话要排成统一的版式，还要导出成适合打印或直接发印刷厂的 PDF。传统做法是在设计软件里手工排版，或者依赖服务器端生成，既慢又容易出错，员工信息一变就得重新走一遍流程。dompdf.js 提供了一条纯前端路径：把名片版式写成 HTML 模板，循环填充人员数据，每次 addPage 生成一张名片，最后统一保存为多页 PDF。样式完全统一、文字可选中、中文不乱码，数据录完即可下载，整个过程不需要任何后端参与，服务器零压力，非常适合人事系统和销售管理平台直接集成，一次接入长期复用。本文覆盖典型场景、核心代码、版式要点与常见问题，照着做即可直接落地，收益立竿见影，无需再四处找方案。

批量名片生成的典型场景

企业人事系统里，新员工入职要统一印制名片，行政往往一次性要为几十人下单；销售团队人员流动频繁，名片需求几乎每个月都有，有的公司一年要更新好几轮。逐个用设计工具排版效率极低，还容易出现字体不一致、对齐错位这类问题，改一个人的信息就要重排一次，批量模板化是唯一可行的做法，配合前端生成可以做到数据一变、PDF 立刻更新。

展会、行业会议前经常要临时赶制一批名片，留给后端渲染的时间窗口很短，有时上午录完数据、下午就要交付，后端排队根本来不及。纯前端生成可以做到数据录入完成、PDF 立刻下载，完全绕开服务器排队和模板维护，活动前最后一刻修改也来得及，不会耽误交付，现场也能随时补印。

除了实体印刷，电子名片也越来越常见：HR 把带二维码的名片 PDF 直接发给候选人，销售在微信里发电子名片给客户，市场部在活动页提供名片下载入口，一场活动就能发出几百份。这类需求都要求生成快、格式规范、可以重复批量执行，与 dompdf.js 的能力高度契合，一套方案同时覆盖线上和线下两个场景，投入产出比很高。

为什么选择 dompdf.js 做名片导出

名片对排版精度要求很高：90×54mm 的标准尺寸、居中的姓名与职位、清晰分行的联系方式，任何一项偏差都会显得不专业。dompdf.js 直接渲染 DOM，HTML 模板里怎么写，PDF 里就是什么样，版式可控性远高于需要手工计算坐标的绘图类库，改版也只需调整模板，设计还原度有保证。

名片是典型的中文场景，姓名、职位、公司名都依赖中文字体。dompdf.js 内置思源黑体（Source Han Sans SC），无需配置字体就能输出规范的中文文字，不会出现乱码或字体缺失的方块，跨设备、跨浏览器生成的效果也完全一致，省去了字体配置的麻烦，交付更省心。

输出是矢量 PDF，文字可选中、可搜索，放大缩小都不模糊，一套文件同时满足印刷和电子分发两种用途；Rust+WASM 内核保证了批量生成大文档时依然流畅，整体体验明显优于传统的截图式 PDF 方案，交付质量也更稳定，印刷厂可以直接使用。

代码示例：批量生成名片 PDF

核心思路是把名片模板写成函数：接收人员数据、返回 HTML 字符串，然后循环调用 addPage，每张名片作为独立页面输出，版式互不影响，页面之间也不会串内容；以后新增人员，只需要往数据数组里加一条记录，代码完全不用改，维护成本很低，接新需求也快。

如果想在一页里排多张名片（比如三乘三的九宫格），可以把卡片写成块级元素放进同一个页面容器，由自动分页按 A4 尺寸切分；容器宽度对齐 794px（A4 在 96 DPI 下的像素宽度）时效果最稳定，一页九张也更省纸、更方便打印裁切，批量打印成本更低。

save 方法直接触发浏览器下载，无需手动处理 Blob；如果需要先预览再导出，可以先把模板渲染到页面确认版式，确认无误后再调用生成逻辑。对数据敏感的公司，还可以在导出完成后清理页面上的临时 DOM，保证员工信息不残留，安全合规更放心。

import { DomPDF } from 'dompdf.js';

const staff = [
  { name: '张伟', title: '销售总监', phone: '138-0000-0001', email: 'zhangwei@example.com' },
  { name: '李娜', title: '产品经理', phone: '138-0000-0002', email: 'lina@example.com' },
];

const cardHTML = (p) => `
  <div style="width:90mm;height:54mm;border:1px solid #ccc;padding:6mm">
    <div style="font-size:14pt;font-weight:bold">${p.name}</div>
    <div style="font-size:10pt;color:#666">${p.title}</div>
    <hr style="margin:3mm 0">
    <div style="font-size:9pt">电话：${p.phone}</div>
    <div style="font-size:9pt">邮箱：${p.email}</div>
  </div>`;

const pdf = new DomPDF();
staff.forEach((p) => pdf.addPage(cardHTML(p), { format: 'A4', margin: '10mm' }));
pdf.save('business-cards.pdf');

名片版式设计要点

名片标准尺寸通常为 90×54mm，设计模板时建议直接使用 mm 单位，避免 px 换算带来的误差；四周留出 3mm 以上的安全边距，需要印刷时再按印刷厂要求补充出血位，避免成品裁切时把文字裁掉，版式细节决定成品质量，马虎不得，特别是异形尺寸和特殊工艺，提前与印刷厂沟通清楚最稳妥，避免批量印刷后才发现问题。

版式上建议把公司名称、姓名、职位、联系方式分成清晰的层级：姓名用大号粗体突出，职位用次级字号，联系方式统一小字号排列，视觉上主次分明、信息易读，客户拿到手一眼就能找到重点，不需要逐行寻找，这也是专业名片的通用标准。

dompdf.js 支持 flex 和 grid 布局，名片常见的左右分栏、上下居中、双面结构都可以用现代 CSS 实现，样式还原度比传统坐标式 PDF 库高很多；后续调整配色、更换版式，只需要修改模板样式，生成逻辑一行都不用动，迭代非常快，设计稿到上线可以当天完成。

数据模板与批量填充技巧

人员数据通常来自 HR 系统或表格导入，前端拿到数组后遍历填充模板即可。注意对姓名、公司名等字段做 HTML 转义，避免 &、<、> 这类特殊字符破坏模板结构导致渲染异常，尤其要注意外企姓名中的特殊字符和标点，转义一步到位最省心，避免上线后才发现问题。

公司 logo、二维码可以做成图片嵌入模板：dompdf.js 支持位图、SVG 和 data URL，logo 用 base64 或线上地址都可以，无需额外上传环节，模板自包含、可离线生成，跨部门复用也很方便，换 logo 只改一处，全部名片同步更新，图片尺寸与格式尽量统一，整体观感更整齐，印刷还原度也更好。

名片数量很大（上百张）时，可以分批 addPage 并配合进度提示，避免一次性生成过多页面；渲染计算在 Web Worker 中完成，导出过程中页面仍保持可响应，用户不会看到卡死的界面，体验更流畅，批量任务也能安心执行，生成结果随时可查。

常见问题与注意事项

Q: 生成的 PDF 中文会乱码吗？A: 不会，内置思源黑体，直接输出规范中文，姓名、职位、公司名都不会出现乱码；如果公司要求特殊字体，可以通过字体配置显式嵌入字体文件，效果与网页完全一致，品牌字体也能完整还原，交付给印刷厂也能保证字库合规，印刷效果不打折扣。

Q: 名片上能放二维码吗？A: 可以，二维码按普通图片嵌入，矢量输出保持清晰锐利，手机扫码完全不受影响，适合电子名片和活动引流场景；注意把二维码尺寸控制在可扫范围内，四周留白即可，扫描成功率更有保障。

Q: 批量导出性能如何？A: Rust+WASM 内核处理速度快，百张名片的规模可以秒级完成，远快于传统方案；建议在导出按钮上做防重复点击处理，避免用户连续点击生成多份文件，同时给足进度反馈，体验更完整，上线后也少被投诉，生产环境实测稳定，可以放心交给业务部门日常使用。