证书是赛事、教育、培训和企业活动中的高频文档，一张精美的获奖证书既要排版庄重，又要信息准确。传统证书制作依赖设计软件手工排版，批量生成不同姓名的证书更是费时费力；后端方案则要处理字体、图片和模板的复杂配置。dompdf.js提供了一条高效路径：证书模板用HTML+CSS设计，姓名、奖项等变量通过模板字符串注入，前端渲染成矢量PDF，批量生成只需循环addPage。本文将详细介绍证书PDF的在线生成方案，包括证书版式设计、装饰边框、批量生成不同姓名、印章图片嵌入和常见问题，帮助你快速搭建证书生成系统。本文还会讲到防伪设计、横版竖版的选择、姓名长度差异的处理，以及决定证书是被珍藏还是被丢弃的打印细节。无论你做竞赛、培训还是企业活动，这些方法都能让你在几分钟内批量生成几百张精美证书，同时保证每一张都准确、可追溯。
获奖证书广泛用于编程竞赛、征文比赛、体育赛事、企业年会、培训结业和公益活动。证书通常包含主办方名称、获奖者姓名、奖项名称、获奖时间、证书编号和主办方印章，版式要求庄重大气，体现活动的正规性。
赛事和活动结束后往往需要在短时间内发放大量证书，例如一个编程竞赛可能有上千名获奖者。手工制作不现实，后端批量生成又需要配置字体和模板，前端方案配合数据列表循环渲染，几分钟就能生成全部证书PDF。
证书的呈现形式也很多样：有的需要打印纸质版盖章，有的需要电子版发送邮件，还有的用于官网公示。矢量PDF完美适配这些场景，打印清晰、电子传输体积小，而且可以搜索复制获奖者姓名，方便公示和检索。
证书的价值在于公信力，因此防伪也很重要。可以在证书角落加入缩小的防伪码或二维码，扫码跳转到主办方官网验证页面，输入证书编号即可核验真伪；电子证书还可以叠加数字签名信息，让证书既美观又可验证，提升活动的专业形象。
证书版式以居中布局为主：顶部是主办方名称或Logo，中部是获奖证书标题，然后是兹证明某某在某活动中荣获某某奖项的正文，底部是落款、日期和印章。使用flex布局或text-align:center即可实现对称的视觉结构。
装饰元素是证书质感的来源：可以设置双线边框或花纹边框，标题使用较大字号并加粗，正文行距适当加大；背景色可以用浅色，但注意打印场景建议使用接近白色的背景，避免墨迹浪费和颜色偏差。
姓名和奖项是证书中的变量部分，建议字号略大于正文并使用加粗突出；证书编号建议采用固定格式，如CERT-2026-0001，配合编号规则实现证书的唯一性和可追溯性，防止伪造和重号。
版式上还有一个常见选择：横版还是竖版。竞赛证书多为横版，适合展示奖项名称；结业证书多用竖版，更接近传统学历证书的样式。dompdf.js通过@page的size属性即可切换横竖版，同一套模板逻辑可以生成两种版式，满足不同活动的需求。
证书模板使用标准HTML和CSS描述，一张A4横向证书的典型结构包括：外层div设置边框和背景，内部用多个段落组织标题、正文和落款，变量部分用占位符或模板字符串注入，整体简洁可控。
页面尺寸通过@page媒体属性设置，例如@page { size: A4 landscape; margin: 15mm; }横向证书更符合证书的视觉习惯；也可以使用自定义尺寸配合border实现证书的装裱效果，让渲染结果与设计稿一致。
印章通常使用图片嵌入：将印章图片转为base64后放入模板，设置合适宽度并配合margin调整位置，让印章盖在落款区域；dompdf.js支持图片嵌入，印章细节在矢量PDF中也能清晰呈现。
变量内容的长度差异也需要提前考虑：活动名称可能很长，奖项名称长短不一，模板要预留足够的换行空间，避免文字溢出边框；正文段落建议用固定行高，姓名、奖项用独立段落控制字号，这样无论内容长短，版面都能保持平衡。
下面演示批量证书生成：准备获奖名单数组，循环构建每张证书的HTML，逐张addPage后一次保存，一个PDF文件包含全部获奖者的证书，每位获奖者独立一页。
如果需要每张证书单独一个文件，可以在循环中分别创建DomPDF实例并save，文件名使用获奖者姓名，例如获奖证书-李明.pdf；批量场景建议用一个PDF包含全部证书，发送时按页分割或直接传递整个文件。
示例中把证书编号和姓名一起注入模板，编号通过index计算并补零，保证编号格式统一。实际项目中，获奖名单通常以Excel或接口形式提供，建议先做数据校验：姓名去重、奖项字段规范、编号连续性检查，校验通过后再批量生成。
印章位置的处理：印章图片通常需要覆盖在落款文字上，可以给图片设置绝对定位或负margin微调位置，让印章与落款形成自然的盖章效果；如果印章是红色印章，建议使用透明背景PNG保留红色，避免白色底块遮住文字。
如果想在每张证书上追加不同的落款日期，把日期也作为模板变量传入即可；批量生成时还可以按奖项分组排序，一等奖在前、三等奖在后，最终PDF的顺序与颁奖顺序一致，方便活动现场直接使用。
import { DomPDF } from 'dompdf.js';
const winners = [
{ name: '李明', award: '一等奖', event: '2026年全国青少年编程大赛' },
{ name: '王芳', award: '二等奖', event: '2026年全国青少年编程大赛' },
{ name: '张伟', award: '三等奖', event: '2026年全国青少年编程大赛' },
];
// 印章图片（替换为真实印章的 base64）
const sealBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';
function buildCertificateHtml(winner, index) {
return `
<div style='border:3px double #8B6F47;padding:30px;text-align:center;font-family:Source Han Sans SC,sans-serif'>
<p style='font-size:12pt;letter-spacing:2px'>${winner.event}</p>
<h1 style='font-size:26pt;margin:20px 0;letter-spacing:6px'>获 奖 证 书</h1>
<p style='font-size:14pt;line-height:2'>兹证明 <span style='font-weight:bold;font-size:16pt'>${winner.name}</span></p>
<p style='font-size:13pt;line-height:2'>在${winner.event}中荣获</p>
<p style='font-size:18pt;font-weight:bold;margin:10px 0'>${winner.award}</p>
<p style='font-size:13pt;line-height:2'>特发此证，以资鼓励。</p>
<div style='margin-top:30px;display:flex;justify-content:space-between;font-size:11pt'>
<span>证书编号：CERT-2026-${String(index + 1).padStart(4, '0')}</span>
<span>主办单位（盖章） 2026年8月18日</span>
</div>
<img src='${sealBase64}' style='width:80px;margin-top:10px' />
</div>
`;
}
const pdf = new DomPDF();
winners.forEach((winner, index) => {
pdf.addPage(buildCertificateHtml(winner, index), { format: 'A4', margin: '15mm' });
});
pdf.save('2026年全国青少年编程大赛获奖证书.pdf');证书对文字质量要求很高，dompdf.js内置思源黑体，常规证书使用黑体或宋体风格均能清晰渲染；如需书法字体等特殊效果，可以引入自定义字体，注意检查字体授权并控制字体文件体积。
印章图片建议使用透明背景的PNG，分辨率不低于300dpi，转base64后嵌入；图片尺寸按实际比例设置，过大或过小都会影响证书观感，生成前可以在页面预览中调整位置和大小。
打印场景建议在模板中明确纸张规格，@page设置A4横向或自定义尺寸，并提示用户选择实际大小打印、关闭缩放，保证纸质证书与屏幕预览一致；矢量输出保证任何打印分辨率下文字都清晰锐利。
打印质量还取决于纸张选择：证书建议使用较厚的铜版纸或特种纸，打印时选择高质量打印模式；如果证书用于扫描归档，建议保持纯色背景和清晰边框，扫描件也能保持可读性，兼顾纸质仪式感和电子归档。
常见问题一：证书边框显示不全。边框渲染受页面边距影响，确认@page的margin大于边框预留空间，或将边框样式放在内层div上，避免页面边缘裁切掉装饰线条。
常见问题二：姓名长度不同导致排版不居中。姓名居中依赖text-align:center，与姓名长度无关；若使用固定宽度容器，建议容器宽度足够容纳最长姓名，或使用自适应宽度居中。
常见问题三：批量生成时个别证书信息错误。建议生成前对获奖名单做数据校验，姓名、奖项、活动名称不能为空，编号不能重复；生成后抽样检查PDF内容，确保批量输出的每一张证书都准确无误。
最后，批量生成前务必预览几份样张，检查姓名、奖项、编号渲染是否正确，尤其是姓名中带空格或特殊符号的获奖者；生成日志建议记录每个证书的文件名和编号对应关系，后续补发或查询时可以直接定位，避免重复发放。
下面的按钮用 dompdf.js 在浏览器端实时生成 PDF，无需后端：
这是由 dompdf.js 渲染的示例 PDF 内容。