用途:通过 Playwright(Chromium)把 HTML/CSS 渲染为可印刷 PDF,适用于名片、证书、发票、明信片、信纸、单页等最终需要打印的成品。渲染流程由模板驱动,同一渲染器可产出极简黑白卡片、编辑风水彩卡片等不同风格。
主要能力:内置 business-cards 模板,含 minimal(黑白编辑风)与 watercolor(浅色/深色主题)风格;支持按员工 JSON 数据填充姓名、职位、邮箱、电话、handle、照片与二维码;附带 qr-artistic.ts 生成艺术化二维码(圆点、圆角定位眼、中心 logo 叠加、可配置静区)。渲染输出为 out/<slug>-<style>[-<theme>]-{front,back}.pdf。
使用方式:将技能文件复制到项目根目录后运行。安装依赖示例:bun init -y;bun add playwright qrcode @types/qrcode geist @fontsource-variable/inter @fontsource-variable/fraunces bootstrap-icons;bunx playwright install chromium。渲染示例:bun scripts/render.ts --template business-cards --style minimal --employee example;水彩风格加 --style watercolor --theme light --photo path/to/your-portrait.png;可用 --logo path/to/your-logo.svg 添加二维码中心 logo。新增员工只需放入 employees/<slug>.json 并传 --employee <slug>。
关键规则:需同时设置 CSS @page 尺寸与 Playwright page.pdf({ width, height, preferCSSPageSize: true }),否则会回退到 US Letter;需 -webkit-print-color-adjust: exact,否则背景色与图片会被剥离;字体须通过 @font-face 嵌入;调用 page.pdf() 前等待 document.fonts.ready;出血按 trim + 2×0.125 in 渲染。模板 HTML 支持 NODE_MODULES/ 与 ASSETS/ 路径占位符,以及 NAME、TITLE、EMAIL、PHONE、HANDLE、PHOTO_SRC、QR_SVG、QR_LABEL 等数据占位符,数据字段会做 HTML 转义。
限制:替换映射目前硬编码为名片字段集,新增 EVENT 等字段需扩展渲染器;艺术化二维码建议打印前用手机扫描验证;PDF 后处理(拼版、裁切标记、正反面合并、元数据、压缩)需串联 Skill(document-skills:pdf)。