本项目是一个基于 Next.js 的标签生成工具,可批量生成包含条形码和二维码的 PNG 标签,支持导出并在浏览器端查看。
- 条形码:使用
bwip-js生成 Code128,默认 scale 24 / height 28,并对数量条码提升 scale 以增加清晰度。 - 二维码:使用
qrcode库生成 Data URL,宽度放大到 1240 像素,边距 1 保证边缘留白。 - 图像合成:后端 API 将生成的条形码、二维码嵌入 SVG 布局,再用
sharp转为不透明 PNG,保持高分辨率输出。 - 数据校验:
POST /api/render接收{ columns, vd? },校验各列行数一致并提供缺失提示;按行生成结果。 - 标签字段:行数据列顺序为
BOX ID / P/N / QTY / MPN (必填),可选Maker / 4L / Description。二维码内容格式为BB{BOX}||P{PN}||Q{QTY}||1P{MPN}||4L{4L}(无 4L 时省略)。
npm install
npm run dev默认启动在 http://localhost:3000。
app/api/render/route.ts:核心生成逻辑(条码/二维码创建、SVG 布局、PNG 输出)。app/:前端页面与表单。public/:静态资源。
- 标签画布尺寸:1700×2368 px,留白边距 90 px;根据原型坐标按比例缩放到像素,保证印刷分辨率。
- 返回数据:
results数组包含pill(拼接内容)、image(base64 PNG Data URL)、filename,以及前端引导用labelHints。