关键字：Web 打印，模板设计器，快递面单，标签打印，ERP 打印，AI 生成打印模板

项目名称：openprint 开源 Web 打印模板可视化设计器

项目介绍

openprint 是一款零后端依赖的开源 Web 打印模板可视化设计器，核心引擎与 UI 界面解耦，支持 Vue、React、Angular、原生 JS 等各类前端技术栈接入。通过拖拽方式快速设计快递面单、标签、发票、仓储单据、各类报表打印模板，内置 AI 一句话生成打印模板，支持 Excel 批量数据导入批量打印，配套 C++ Qt 桌面客户端实现静默本地打印，提供 HTTP 接口可快速对接 ERP、进销存业务系统。项目为纯前端为主，无需数据库，浏览器即可运行，适合业务系统集成打印能力、企业单据打印开发、毕业设计打印相关业务参考。

项目源码结构

项目主要技术框架

3.1核心底层框架

项目分为 UI 设计器层和核心引擎层，两层完全解耦。设计器 UI 基于 Vue3+Naive UI+Fabric.js 实现拖拽可视化操作；排版渲染引擎全部使用纯 TypeScript 开发，框架无依赖，可以脱离 Vue 环境在 React、Angular、原生 JS、Node 环境直接调用 SDK。项目主体为纯前端，不需要后端服务与数据库，模板默认存储浏览器 IndexedDB；可选 C++ Qt 桌面客户端实现本地静默打印，对外提供 REST 接口，可对接 ERP 业务系统。

3.2技术栈

3.3数据库

openprint 主体 Web 项目不需要数据库；模板数据存储浏览器 IndexedDB； 如果做服务端模板持久化，需要开发者自行扩展后端存储模板 JSON。

3.4开发及生产环境

开发环境：Node.js >=22.18.0，pnpm >=9.x；IDE 推荐 VSCode 开源协议：AGPL‑3.0 项目状态：持续迭代维护的 Web 打印开源项目

项目主要功能

4.1 可视化设计器模块

4.1.1 控件库

提供文本、图片、线条、矩形、圆形、条码、二维码、表格、富文本、图表十种打印控件。

4.1.2 拖拽画布设计

所见即所得拖拽布局，支持标尺、吸附对齐、图层管理，多页面模板设计，支持页眉页脚配置。

4.1.3 数据绑定

支持 JSON、CSV、API 数据源，Mustache 表达式动态绑定打印字段。

4.1.4 模板管理

模板导入导出 JSON 文件，本地浏览器存储模板。

4.1.5 多格式导出

模板预览，支持导出 PDF、JPG、SVG、HTML 文件。

4.2AI 模板生成模块

4.2.1 自然语言生成模板

输入文字描述需求，AI 自动生成快递面单、标签、小票、出库入库单等打印模板。

4.2.2AI 修改现有模板

选中画布控件，AI 调整布局、样式，自动识别绑定业务字段。

4.3 打印与批量处理模块

4.3.1Excel 批量打印

上传 Excel 表格，自动映射字段，支持流水号自动生成，一行数据生成一张单据，批量预览校验。

4.3.2Web 浏览器打印

浏览器直接调用打印对话框输出。

4.3.3 桌面静默打印

部署 C++ Qt 客户端，接收打印任务，无弹窗静默打印，管理本地打印机，批量任务处理。

4.3.4 云打印

支持远程多门店云打印，打印队列、打印日志审计。

4.4 通用功能模块

4.4.5 多框架 SDK 集成

引擎层完全解耦，Vue、React、Angular、原生 JS、Node.js 均可调用 SDK 渲染模板。

4.4.6 复杂报表能力

支持分组表、交叉表、主从报表，求和、平均统计函数，嵌入各类图表，条件格式高亮。

4.4.7ERP 业务系统对接

标准 HTTP 打印 API，业务系统传入模板 ID 与业务数据，触发打印任务，快速接入 ERP、进销存系统。

这个源码安装部署

5.1 前置环境准备

Node.js 版本大于等于 22.18.0，pnpm 版本大于等于 9.x。

5.2 源码本地运行

1. 克隆源码

git clone https://gitee.com/haiming236/openprint.gitcd openprint

1. 安装依赖

pnpm install

1. 本地开发启动

pnpm dev

1. 生产打包构建

pnpm build

1. 预览构建产物

pnpm preview

5.3SDK 构建，供业务项目引入

pnpm build:sdk

构建产物输出 dist-sdk 目录，可以 tgz 包方式给到业务项目引入，注意字体文件复制到业务项目 public/fonts 目录。

5.4 静态部署 Nginx

将打包 dist 目录部署到 Nginx 静态服务器，nginx 配置示例

server { listen 80; server_name shturl.cc/D6X23; root /path/to/open-print/dist; index index.html; location / { try_files $uri $uri/ /index.html; }}

5.5Docker 部署

FROM nginx:alpineCOPY dist/ /usr/share/nginx/htmlCOPY nginx.conf /etc/nginx/conf.d/default.confEXPOSE 80

5.6 首次运行配置

1. 访问页面打开打印设计器，拖拽控件完成模板绘制；
2. 配置数据源，测试数据绑定预览打印效果；
3. 如果需要静默打印，部署配套 C++ Qt 桌面打印客户端；
4. ERP 对接：导出模板 JSON，业务系统调用 HTTP 打印接口下发打印任务。

重要提示：Web 主体不需要后端数据库；AI 生成模板功能需要自行配置大模型 API；PDF 导出依赖字体文件，需要部署字体静态资源。

5.7 常见故障排查

1. PDF 导出文字乱码：检查字体文件 fonts 目录部署完整；
2. SDK 引入后控件不渲染：确认业务项目复制 fonts 静态资源；
3. 桌面客户端无法接收打印任务：检查客户端 HTTP 端口防火墙放行；
4. AI 模板生成无返回：确认大模型 API 密钥配置正确，网络可访问大模型服务；
5. React 项目集成报错：使用 headless 无头渲染 API，不要直接引入 Vue 设计器组件。

这个源码部分截图

打印设计器拖拽画布界面、快递面单模板效果、标签批量打印预览、报表图表模板、桌面打印客户端界面。

这个源码适合的学习人群

该项目代码结构清晰、注释规范、无过度封装、轻量化易上手，极其适合四类人群学习：Java后端初学者、微信小程序开发学习者、计算机专业在校学生、个人开源项目爱好者。

这个项目源码获取方式

关注公众号，回复: 打印模板