导读3 分钟读完 | 零框架 | 600 DPI 一键导出 | 销售预设秒切换本文基于开源示例项目biz-card-template复盘从踩坑到落地适合前端、独立开发者、ToB 团队技术负责人阅读。文中公司名、人名、电话、地址均为虚构示例仅供技术演示。先说结论我们把公司名片从「PSD 死图」改成了「配置驱动 浏览器高清导出」改销售信息下拉框选一下不用找设计师导出印刷图600 DPI 正反面 ZIP直接发印刷厂技术栈HTML CSS 原生 JS能进 Git、能私有化部署一张 90mm × 54mm 的小卡片背后可以是一条可维护的工程链路。01一张名片为什么能折腾三天公司要印新名片流程大家都很熟找设计师 → 改文案 → 销售 A 离职换 B → 印刷厂说分辨率不够 → 再导出、再对稿……我们是做产业数字化的自己却在用最原始的方式管名片——这有点讽刺。于是干脆用前端把名片工程化传统做法我们的做法PSD / Figma 死图config.js数据配置改一个字重新导出改配置页面即时刷新截图发给印刷厂600 DPI PNG一键打包10 个销售 10 套稿子销售预设下拉切换核心洞察很多「设计稿问题」本质是数据问题。02架构一张图看懂flowchart TB subgraph 数据层 A[config.jsbr/公司 / 销售 / 主题色] B[salesPresetsbr/多人销售预设] end subgraph 渲染层 C[render.jsbr/正反面 HTML 模板] D[card.cssbr/90mm × 54mm] end subgraph 交互层 E[debug-panel.jsbr/弹框实时编辑] F[销售下拉切换] end subgraph 输出层 G[html2canvasbr/600 DPI] H[JSZip 正反面打包] I[media print 直接打印] end A -- C B -- A C -- D D -- J[浏览器预览] E -- A E -- C J -- G G -- H J -- I没有 React没有 Vue——静态页面扔 CDN、扔客户内网都能跑。03名片 数据 视图附核心代码3.1 一份配置驱动正反面export const cardConfig { company: { nameShort: 云构科技, name: 深圳市云构科技有限公司, products: 慧机云 · 企业设备智慧管理平台, services: 标准化产品 · 物联网 · 数据分析 · 技术咨询, website: example-corp.com, address: 某市高新区科创大道 88 号, addressLine2: A 座 12 楼 1206 室, }, sales: { name: 张伟, title: 销售经理 · Sales Manager, phone: 138-0000-0001, }, theme: { navy: #0F2744, orange: #F97316, }, };Git diff 一眼看清改了什么——比翻 PSD 历史图层文明太多。3.2 销售预设团队名片批量管理的雏形export const salesPresets { personA: { name: 李娜, phone: 138-0000-0002, wechatQr: /assets/sales-a-qr.png, }, personB: { name: 张伟, phone: 138-0000-0001, wechatQr: /assets/sales-b-qr.png, }, }; exportfunction applySalesPreset(config, presetId) { const preset salesPresets[presetId]; config.sales.name preset.name; config.sales.phone formatPhone(preset.phone); config.assets.wechatQr preset.wechatQr; return config; }调试面板里下拉选销售姓名、手机、微信二维码联动更新——这是未来「多租户批量生成名片」的 MVP 形态。3.3 手机号自动格式化export function formatPhone(phone) { const digits String(phone).replace(/\D/g, ); if (digits.length 11) { return ${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}; } return phone; }13800001234→138-0001-2345印刷版面更整齐。04用 CSSmm单位和印刷厂说同一种语言国内标准名片90mm × 54mm。.card { width: 90mm; height: 54mm; border-radius: 2mm; }字体用pt间距用mm渐变和装饰全用 CSS——屏幕预览比例 ≈ 实物比例不用再猜「屏幕上这样印出来多大」。主题色通过 CSS 变量动态注入换品牌色只改配置root.style.setProperty(--navy, cfg.theme.navy); root.style.setProperty(--orange, cfg.theme.orange);05最难的部分浏览器导出 600 DPI 印刷图印刷厂要高清 PNG不是微信截图。5.1 像素怎么算const PRINT_DPI 600; const EXPORT_WIDTH Math.round((90 / 25.4) * PRINT_DPI); // 2126 px const EXPORT_HEIGHT Math.round((54 / 25.4) * PRINT_DPI); // 1276 px600 DPI × 标准名片尺寸导出即可直接送印无需二次放大。5.2 我们踩过的三个大坑建议收藏#坑现象解法1离屏 DOM 截图PNG 只有纯色背景文字全没放弃left:-99999px改截可见区域2html-to-image 翻车跨域字体 / 图片导致空白换html2canvas 图片 Base64 内联3小图硬拉大文字锯齿、二维码糊按 DPI动态算 scale别固定写死关键导出逻辑await document.fonts.ready; await inlineImages(node); // fetch 图片 → Base64避免 Canvas 污染 const scale EXPORT_WIDTH / node.getBoundingClientRect().width; const canvas await html2canvas(node, { scale, backgroundColor: #0F2744, useCORS: true, allowTaint: false, onclone: (_doc, el) { el.style.boxShadow none; el.style.borderRadius 0; }, }); // 空白检测全是同一颜色 导出失败别静默下载废图 if (isCanvasBlank(canvas)) { thrownewError(名片内容未渲染请刷新后重试); }正反面打进 ZIP一次下载zip.file(biz-card-front-600dpi.png, frontBlob); zip.file(biz-card-back-600dpi.png, backBlob);06调试弹框让市场同事也能自己改不是每个人都会改 JS。我们做了一个居中弹框非侧边栏支持下拉切换销售人员预设实时编辑公司文案、地址、产品描述输入即渲染renderCards(liveConfig)一键复制config.js到剪贴板form.addEventListener(input, (e) { liveConfig[section][key] input.value; renderCards(liveConfig); });能所见即所得就不用来回沟通「再往左 2px」。07正反面怎么分工信息架构正面背面公司简称 定位公司全称 行业标签销售姓名大字核心产品慧机云手机 / 官网 / 地区服务内容微信二维码官网 办公地址原则正面认人背面认产品。ToB 销售场景比堆工商信息更有效。08技术栈极简但每一层都有理由依赖用途为什么选它Vite开发 构建快、零配置html2canvasDOM → Canvas可见 DOM 截图稳定JSZip正反面打包避免浏览器拦截连续下载fontsource/noto-sans-sc本地中文字体导出不乱码、不依赖 Google Fonts渲染层用纯函数拼 HTML关注点分离config.js → 数据 render.js → 视图 card.css → 样式 export-image.js → 印刷输出 debug-panel.js → 业务自助0930 秒跑起来git clone your-repo cd biz-card-template npm install npm run dev浏览器打开http://localhost:5173/你想做什么怎么操作改文案编辑js/config.js或打开「调试面板」换销售调试面板下拉选销售人员送印刷厂点「导出印刷图」→ 解压 ZIP本地打印Cmd P或点「打印名片」上线部署npm run build→dist/扔 Nginx/OSS10这个项目还能往哪走我们已经验证过的方向适合 ToB 团队批量生成遍历salesPresets循环导出全团队 ZIP多租户 SaaS租户后台 Excel 导入销售 → 一键生成名片私有化部署Docker 单镜像客户内网运行动态二维码接入qrcode.js微信号变动不用重新做图PDF 拼版jspdf输出 A4 拼版方便数码快印名片只是入口本质是「企业品牌物料的配置化引擎」。11给不同读者的 Takeaway前端同学DOM 不只是页面也可以是印刷产线的输入源。mmhtml2canvas DPI 计算是一条被低估的轻量路线。技术负责人把物料从「设计资产」变成「代码资产」版本可控、批量可复制销售团队扩张时不会线性增加设计成本。独立开发者 / 副业ToB 小工具不需要大而全。一个垂直场景销售名片 高清导出 私有化就能卖出 SaaS 或实施费。写在最后我们用做产品的思路重新做了一张名片。它没有花哨动效没有复杂框架但解决了真实痛点快、准、可维护、能印刷。如果你也在为小团队的印刷物料头疼——工牌、证书、合同页眉——不妨试试「配置 模板 高清导出」这条路。毕竟能写进 Git 的东西才配叫公司的数字资产。演示官网example-corp.com虚构标签#前端工程化#开源项目#ToB提效#html2canvas#名片印刷#独立开发者欢迎 Star、Fork改成你们自己的公司名片模板。