开放代码社区 › openprint
openprint
AI/机器学习TypeScript开源 Web 打印设计器 · AI 驱动 · 框架无关 · 跨平台 诚邀开发者加入 — 我们欢迎全球开发者加入 OpenPrint 开源社区，共同参与产品研发，贡献代码、提交 Issue 或建议，一起打造更优秀的打印解决方案！ OpenPrint 是一款开源、零后端依赖的 Web 打印模板可视化设计器。它让用户通过拖拽即可设计快递面单、发票、标签、报表等打印模板，支持 AI 一句话生成、云打印、C++ 桌面客户端静默打印，3 分钟即可对接 ERP 系统。 纯前端架构，无需服务器，无需数据库，一个浏览器即可运行。
仓库地址
https://gitee.com/haiming236/openprint.gitREADME
<p align="center">
<img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/93ff2e0a29da0ac55b7c6d4c.png" width="120" alt="OpenPrint Logo" />
</p>
<h1 align="center">OpenPrint</h1>
<p align="center">
<strong>开源 Web 打印设计器 · AI 驱动 · 框架无关 · 跨平台</strong>
</p>
<p align="center">
<a href="https://github.com/your-repo/open-print/stargazers"><img src="https://img.shields.io/github/stars/your-repo/open-print?style=flat-square&logo=github" alt="Stars" /></a>
<a href="https://github.com/your-repo/open-print/releases"><img src="https://img.shields.io/github/v/release/your-repo/open-print?style=flat-square&logo=github" alt="Release" /></a>
<a href="https://gitee.com/haiming236/openprint/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-GPL--3.0-blue?style=flat-square" alt="License" /></a>
<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/Vue_3-4FC08D?style=flat-square&logo=vue.js&logoColor=white" alt="Vue 3" /></a>
<a href="https://www.naiveui.com/"><img src="https://img.shields.io/badge/Naive_UI-18A058?style=flat-square&logo=naiveui&logoColor=white" alt="Naive UI" /></a>
<a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" /></a>
<a href="https://github.com/fabricjs/fabric.js"><img src="https://img.shields.io/badge/Fabric.js-7.x-blue?style=flat-square" alt="Fabric.js" /></a>
<a href="https://www.npmjs.com/package/openprint26"><img src="https://img.shields.io/npm/v/openprint26?style=flat-square&logo=npm&logoColor=white" alt="npm" /></a>
</p>
<p align="center">
<a href="#features">功能特性</a> ·
<a href="#quick-start">快速开始</a> ·
<a href="#ai-assistant">AI 助手</a> ·
<a href="#architecture">架构</a> ·
<a href="#deploy">部署</a> ·
<a href="#faq">FAQ</a> ·
<a href="#交流群">交流群</a>
</p>
🚀 **诚邀开发者加入** — 我们欢迎全球开发者加入 OpenPrint 开源社区，共同参与产品研发，贡献代码、提交 Issue 或建议，一起打造更优秀的打印解决方案！
**OpenPrint** 是一款开源、零后端依赖的 Web 打印模板可视化设计器。它让用户通过拖拽即可设计快递面单、发票、标签、报表等打印模板，支持 AI 一句话生成、云打印、C++ 桌面客户端静默打印，3 分钟即可对接 ERP 系统。
> 纯前端架构，无需服务器，无需数据库，一个浏览器即可运行。
> **框架无关设计** — 核心渲染引擎与 UI 层完全解耦，设计器基于 Vue 3 + Naive UI 构建，渲染引擎使用纯 TypeScript 实现，可无缝接入 React、Vue、Angular、原生 JS 等任意技术栈。
*所见即所得的打印模板设计器，拖拽控件、实时预览*
### 一键导入 · 百张秒打
把 Excel 流水数据直接导入设计器，自动映射字段、自动生成流水号，批量打印差异化的货物标签、资产标签、流水线标签。
- ✓**Excel 数据直联** — 上传表格自动识别列，字段一键映射到标签
- ✓**流水号自动编排** — 支持"分类-年份-序号"自定义规则，如 ZC-2026-0158
- ✓**一行一标签** — 每行数据生成一张独立标签，99 行批量输出 99 张
- ✓**逐条预览校验** — 第 1/99 行分页预览，批量前逐条检查，避免打错
- ✓**打印实时监控** — 进度条 + 成功/失败统计 + 耗时均速，全程可视可控
- ✓**多标签场景** — 货物 SKU 标、资产标识、流水线 SN 码、仓储码，一屏搞定
***
## 目录
- [核心亮点](#核心亮点)
- [功能特性](#功能特性)
- [快速开始](#快速开始)
- [AI 助手](#ai-助手)
- [技术架构](#技术架构)
- [项目结构](#项目结构)
- [部署](#部署)
- [桌面客户端](#桌面客户端)
- [ERP 对接](#erp-对接)
- [FAQ](#faq)
- [交流群](#交流群)
- [贡献指南](#贡献指南)
- [许可证](#许可证)
***
## 核心亮点
### 🔌 框架无关，引擎与 UI 解耦
OpenPrint 采用**引擎层与 UI 层分离**的架构设计：
- **渲染引擎**（`@openprint/engine`）— 纯 TypeScript 实现，零框架依赖，负责模板解析、数据绑定、分页排版、HTML/PDF/SVG 渲染导出
- **设计器 UI**（`openprint26`）— 基于 Vue 3 + Naive UI 构建可视化拖拽设计器
无论你的项目用 **React、Vue、Angular** 还是 **原生 JS**，都能轻松集成：
| 接入方式 | 说明 |
| ---------------- | ------------------------------------------------- |
| **Vue 3 项目** | 直接安装 `openprint26`，使用 `<OpenPrintDesigner />` 组件 |
| **React 项目** | 通过引擎 SDK 渲染模板，或用 Web Components 包装设计器 |
| **Angular 项目** | 引擎 SDK 渲染 + iframe 嵌入设计器 |
| **原生 JS / 任何框架** | 引擎 SDK 零依赖，`render({ template, data })` 即可输出 HTML |
### 🤖 AI 一句话生成模板
告别手动拖拽，直接描述需求即可生成专业打印模板。支持快递面单、物流标签、仓储单据、零售小票等多种场景。
*AI 自然语言生成打印模板，一句话完成面单设计*
```
用户输入："帮我生成一张快递面单，含收件人、寄件人和运单号条码"
AI 输出： 自动创建模板 → 布局文本控件 → 添加条码 → 一键使用
```
### ☁️ 云打印
跨地域多门店远程打印，模板统一管理。浏览器直接打印，免装驱动。云端打印队列，断线自动重试，权限管控，打印日志审计。
*多门店远程打印，模板统一管理，打印队列监控*
云控大屏
### 📊 Web 报表设计
分组表、交叉表、主从表等多级报表结构，支持求和/平均/计数等汇总函数，嵌入柱状图/折线图/饼图，条件格式高亮数据预警，多数据源拼接。
*分组报表、交叉表、图表，满足复杂数据展示需求*
***
## 功能特性
### 设计器
| 功能 | 说明 |
| -------- | ------------------------------------------ |
| **控件库** | 文本、图片、矩形、圆形、线条、条码、二维码、表格、富文本、图表 10 种控件 |
| **拖拽设计** | 所见即所得，自由拖拽 + 吸附对齐 + 标尺辅助 |
| **多页支持** | 多页设计，每页独立页眉页脚，页间距可调 |
| **数据绑定** | 支持 JSON / CSV / API 数据源，Mustache 表达式绑定 |
| **主题切换** | 基于 Naive UI 的深色/浅色主题，一键切换 |
| **框架无关** | 引擎层纯 TypeScript，支持 React/Vue/Angular/原生 JS |
| **模板管理** | 本地存储，模板导入/导出，模板市场 |
| **实时预览** | 预览数据绑定效果，分页预览 |
| **导出** | PDF / JPG / SVG / HTML 多格式导出 |
### 打印与对接
- **Web 直接打印** — 浏览器调用系统打印对话框
- **桌面静默打印** — 配套 C++ Qt 客户端，零弹窗打印
- **云打印** — 远程门店打印，打印队列管理
- **ERP 对接** — HTTP API 对接，3 分钟接入
### 技术栈
#### 设计器 UI 层
#### 核心引擎层（框架无关）
![Vitest](https://img.shields.io