开源打印设计器 OpenPrint：前端零依赖，3 分钟对接你的 ERP
|
admin
2026年10月29日 14:21
本文热度 17
|
做 ERP、MES、WMS、医疗或财务软件的朋友，多半被"打印模板"折磨过：快递面单、发票、标签、报表，需求五花八门，改起来没完没了。今天聊一个开源项目 OpenPrint，它是纯前端的打印模板可视化设计器，拖一拖就能排版，还能用 AI 一句话生成模板。
OpenPrint 最大的特点就是零后端依赖——不用服务器、不用数据库，浏览器打开就能用。设计器基于 Vue 3 + Naive UI 构建，核心引擎用纯 TypeScript 实现，天然兼容 React、Vue、Angular 和原生 JS。一句话概括它的定位：把报表 + 标签打印，做成能一键集成进你产品里的能力。
框架无关，引擎与 UI 解耦。渲染引擎是纯 TypeScript，不绑任何框架，任何 JS 环境都能直接调 render() 输出 HTML / PDF / SVG；官方设计器通过 Web Components（print-designer 自定义元素）嵌入，宿主侧零框架依赖。
AI 一句话生成模板。输入"生成一张快递面单，含收件人、寄件人和运单号条码"，LLM 解析意图、转成结构化描述、落到 Fabric.js 控件，快递面单、仓储单据、零售小票都能自动排。
一键导入，百张秒打。Excel 数据直连自动识别列、映射字段、编排流水号，99 行数据批量出 99 张独立标签；还能逐条分页预览、实时监控打印进度，避免打错。
多通道出纸。浏览器直接打印、C++ Qt 桌面客户端静默打印、云打印队列，以及 ESC / TSPL / ZPL 指令直通，ERP 走 HTTP API 对接，3 分钟接入。
体积克制。核心引擎约 190 kB（gzip 约 57 kB），条码、二维码、公式、jspdf 全部按需加载；实测业务项目入口主包只有 1.6 kB，设计器本体 5.9 MB 也是用到才下载。
引擎层与 UI 层分离，是它区别于一般打印组件的地方：
UI 层（可替换）：官方设计器用 Vue 3 + Naive UI + Fabric.js；React、Angular、原生 JS 项目走 Web Components 或 iframe 薄桥接，宿主侧零依赖。
引擎层（框架无关）：排版引擎负责数据绑定、表达式计算、分页、表格、分组；渲染引擎负责 HTML / PDF / JPG / SVG 导出；导出引擎、无头渲染（headless）、AI 助手、SDK 都是独立模块。
服务端渲染：新增的 openprint-render 提供 Render Bridge，把"模板 + 数据 → PDF"变成一个 HTTP 接口，Node + Chromium、Docker 独立部署，和设计器共用同一套引擎，版式零漂移。
控件：文本、图片、矩形、圆形、线条、条码、二维码、表格、富文本、图表，共 10 种。
排版：所见即所得拖拽、吸附对齐、标尺、多页设计、每页独立页眉页脚。
数据：JSON / CSV / API 数据源，Mustache 表达式绑定，套打预览。
导出：PDF / JPG / SVG / HTML 多格式。
报表：分组表、交叉表、主从表，求和 / 平均 / 计数汇总，柱状图 / 折线图 / 饼图，条件格式预警。
云打印：跨门店远程打印、队列监控、断线重试、权限与日志审计。
1、静默打印客户端常驻托盘，任务到达直接出纸；把打印机共享给局域网内任意电脑，手机扫码就能传文件、拍照直印。主界面把打印任务、本地打印、指令打印、打印机管理、接口打印等入口都收在了一起。
git clone https://gitee.com/haiming236/openprint.gitcd open-print && pnpm install && pnpm dev
import { render } from 'openprint26'const { html, pages } = await render({ template, data })document.getElementById('print-area').innerHTML = html
不想装环境的话，浏览器直接打开在线演示就能拖一张面单，排好导出 JSON，再落到自己系统里，前端基本不用写胶水代码。对做 ERP / MES / WMS / 医疗 / 财务的团队来说，它把最磨人的"报表 + 标签打印"从自研里摘出来，省下的不是一次开发，而是以后每次改模板的运维成本。
阅读原文：点击这里
该文章在 2026/10/29 14:22:35 编辑过
400 186 1886
