标签打印系统架构设计笔记
1. 背景与目标
目前系统中出货单、标签等打印页面采用 HTML + CSS 固定布局，当客户需要调整样式时往往需要改代码，维护成本高。
目标是：
- 将布局从代码中解耦
- 用户可自定义标签/表单布局
- 支持 PDA 热敏打印机 和 PC 普通打印机
- 支持 二维码 / 条码 / 表格 / 文本 / 图片 等控件
- 支持 实时渲染 + 保存模板 + 自由编辑
2. 打印机能力与 bwip-js 角色说明
| 项目 | 作用 | 说明 |
|---|---|---|
| js_printQR | 打印机内部自动生成二维码 | 简单但样式不可自定义 |
| bwip-js | 在前端生成条码/二维码图形 | 可与文字排版组合用于专业标签 |
| Canvas | 绘制整张标签 | 排版、文字、线条、表格、二维码都在这里完成 |
| js_printBitmap | 将 Canvas 转 Base64 后发送打印 | PDA 热敏打印机使用的最终指令方式 |
总结：
bwip-js只负责绘制二维码/条码Canvas负责绘制整张标签js_printBitmap负责发送给打印机
3. 标签生成流程（标准模型）
字段数据(JSON) + 模板配置(JSON)
↓
渲染引擎(Canvas)
↓
生成 Base64 图片
↓
js_printBitmap → 打印机
4. 可视化标签设计器模型
你看到的“可拖拽组件调整布局”的设计器，本质是：
可视化编辑器 (Fabric.js 或 Konva.js)
↓
生成布局模板 JSON
↓
渲染引擎根据模板和业务数据动态生成标签
模板 JSON 示例
{
"paper": { "width": 384, "height": "auto" },
"elements": [
{ "type": "text", "bind": "customer", "x": 20, "y": 40, "fontSize": 18 },
{ "type": "text", "bind": "spec", "x": 20, "y": 80, "fontSize": 18 },
{ "type": "qrcode", "bind": "batch", "x": 260, "y": 40, "size": 120 }
]
}
5. 模板存储方案
使用 MySQL JSON 字段 存储模板。
示例建表：
CREATE TABLE print_template (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
bill_type VARCHAR(50) NOT NULL,
template JSON NOT NULL,
status TINYINT DEFAULT 1,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
优势：
- 模板内容可变 无需改表结构
- 可存多套模板（可按客户区分）
- JSON 可直接读取 & 更新 & 部分字段检索
6. 页面渲染模式对比
| 模式 | 原方式 | 改造后 |
|---|---|---|
| 页面展示 | HTML+CSS 固定布局 | 模板 JSON → 渲染引擎动态构建 |
| 修改样式 | 改代码发布 | 打开设计器拖拽保存即可 |
| 打印设备适配 | 单一 | Canvas 输出可适配 PDA & PC |
7. PDA 标签绘制示例（关键步骤）
let canvas = document.getElementById("label");
let ctx = canvas.getContext("2d");
// 文字
ctx.fillText("客户：雅芳", 10, 40);
// 二维码（由 bwip-js 生成后 drawImage）
bwipjs.toCanvas(qrCanvas, { bcid:'qrcode', text:data.batch });
ctx.drawImage(qrCanvas, 250, 40);
// 转 Base64 打印
let base64 = canvas.toDataURL("image/png").split(',')[1];
Android_Printer.js_printBitmap(JSON.stringify({ base64 }));
Android_Printer.js_start();
8. 最终要构建的 3 个核心模块
| 模块 | 作用 |
|---|---|
| LabelEngine.js | 根据模板 JSON + 数据 → Canvas 绘图 → 返回 Base64 |
| LabelDesigner（可视化编辑器） | 拖控件 → 修改属性 → 保存模板 JSON |
| 打印适配层 | PDA：js_printBitmap；PC：window.print / PDF |
9. 结论
是的，你的构想完全可行，而且是可维护性最优的方案。
未来只需要维护控件库与模板系统，布局工作交给用户完成，系统升级也不会影响用户样式。