# worm-vue3-print **Repository Path**: lem361/worm-vue3-print ## Basic Information - **Project Name**: worm-vue3-print - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 20 - **Created**: 2026-09-30 - **Last Updated**: 2026-09-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # worm-vue3-print Vue 3 可视化打印模板设计器 + 模板表达式引擎 + 同构渲染管线的开源 monorepo(npm workspaces)。 可视化拖拽设计打印模板、数据绑定、表达式求值、分页排版;三端共用同一套渲染与分页算法(逻辑同源,像素级一致还需字体与 Chromium 内核同源)。 纯 Vue 3 + HTML/CSS/SVG 原生控件实现,不依赖任何 UI 组件库,可以接入任意 Vue 3 项目中。 ## 🔗 在线预览 GitHub Pages:**https://worm-longliu.github.io/worm-vue3-print/** > 静态部署,仅支持设计器编辑、浏览器预览与浏览器端打印;服务端 PDF 与桌面客户端静默打印不可用。 ## 🖼 设计器预览 ![可视化打印模板设计器截图](docs/images/designer.png) ## 📖 文档 **[中文文档首页 · 文档总览](docs/中文/文档总览.md)** | [快速开始](docs/中文/指南/快速开始.md) | [API 文档](docs/中文/接口/API文档.md) | [示例](docs/中文/示例/示例文档.md) **English**: [Overview](docs/en/Overview.md) | [Changelog](docs/en/CHANGELOG.en.md)(由 AI 依据中文文档生成,以中文版为准) 使用指南: - [使用指南(核心概念与输出方式选型)](docs/中文/指南/使用指南.md) - [模板设计器(PrintDesigner 接入)](docs/中文/指南/模板设计器.md) - [表达式引擎(数据绑定与内置函数)](docs/中文/指南/表达式引擎.md) - [渲染管线(浏览器预览 / 服务端 PDF)](docs/中文/指南/渲染管线.md) - [三端渲染一致性方案](docs/中文/指南/三端渲染一致性方案.md) - [静默打印(桌面客户端 + 浏览器 SDK)](docs/中文/指南/静默打印.md) - [技术复盘(偏差原因与客户端选型)](docs/技术复盘.md) - [CHANGELOG(版本变更记录)](docs/中文/CHANGELOG.md) ## 项目目录结构 ``` worm-vue3-print/ ├── packages/ # 可发布的 npm 包(npm workspaces,发布到 npm) │ ├── print-core/ # @worm-vue3-print/core 模板表达式引擎 + 同构渲染管线(含浏览器端静默打印 SDK 子路径 /client) │ ├── print-canvas/ # @worm-vue3-print/canvas Vue 3 可视化设计器画布 │ ├── print-common/ # @worm-vue3-print/common 通用宿主适配版设计器(实验性,零框架运行时;生产请用 print-canvas) ├── clients/ │ └── print-client/ # @worm-vue3-print/print-client Electron 静默打印桌面客户端(private,不发布 npm) ├── services/ │ └── print-render/ # @worm-vue3-print/render 服务端 PDF / 截图渲染微服务(private,不发布 npm) ├── demo/ # 演示项目:Vue 3 设计器 + 预览 + 静默打印集成的完整示例 ├── demo-common/ # 演示项目:apps/ 下四个独立宿主 demo(Vue3/Vue2/React/jQuery),index.html 为静态导航页 ├── docs/ # 项目文档 │ ├── 中文/ # 中文文档(指南 / 接口 / 示例 / 文档总览 / CHANGELOG) │ ├── en/ # 英文文档(首页 Overview / CHANGELOG,AI 生成并声明) │ └── superpowers/ # 设计文档(specs)与实施计划(plans) ├── skills/ # opencode 集成技能(worm-vue3-print-integration,含对接指南) ├── scripts/ # 仓库级脚本(打印架构守卫、产物版权头注入) ├── .github/ │ ├── workflows/ # CI / 自动发布工作流 │ └── release/ # 发布配置 ├── .opencode/ # opencode 本地配置与插件 ├── package.json # npm workspaces 根清单:构建 / 测试 / 打包根命令 ├── AGENTS.md # 对本仓库工作的 AI 代理约束(语言、分层边界、协作约定) ├── CONTRIBUTING.md # 发布与协作流程 ├── SECURITY.md # 安全问题报告方式 ├── LICENSE # MIT └── README.md ``` 各目录功能说明: | 目录 / 文件 | 功能说明 | |---|---| | `packages/print-core` | 核心包(`@worm-vue3-print/core`):表达式引擎(lexer / parser / evaluator)、`template-parser`、数据绑定 / 分页 / HTML 生成(`render`)、设计器内核与浏览器适配(`designer` / `browser`,含连续纸探针与 `browserCodeRenderer`);浏览器端静默打印 SDK 位于子路径 `/client`(传输层 / 协议与错误码 / 打印门面)。纯 TypeScript,无 Vue、无宿主依赖 | | `packages/print-canvas` | 设计器画布(`@worm-vue3-print/canvas`):Vue 3 组件(`components`)、组合式函数(`composables`)、内置帮助内容(`help-content`)、原生控件样式(`styles`)。含 `PrintDesigner`、`PrintHtmlPreview` | | `packages/print-common` | ⚠️ **实验性**:通用宿主适配设计器(`@worm-vue3-print/common`):以原生自定义元素 `` 形态提供,任意框架或无框架宿主均可直接接入,供 React / Vue2 / jQuery 等非 Vue3 宿主使用,**不打包 Vue 运行时**。样式与图标由 `scripts/gen-styles.mjs`、`scripts/gen-icons.mjs` 从 canvas 构建产物派生(类名逐字对齐),交互与渲染逻辑复用 core 的 designer 导出;另产出浏览器直挂形态 `dist/common.js`(UMD,core 与码制库内联,挂 `window.WormPrintCommon`)与 `dist/common.css`,无打包器宿主一个 ` ``` 关键 props / 事件 / 方法: - `initial-template`:初始模板 `TemplateData`;`fields`:业务字段 `PrintBusinessField[]`; `is-edit`:是否编辑态。 - `show-help`:帮助入口开关,默认开启,传 `false` 可关闭帮助按钮与帮助弹框。 - `@preview` / `@save`:预览与保存事件,宿主持有 `getTemplateJson()`/`getTemplateJson` 之外的业务逻辑自理。 - `getTemplateJson()`:通过 `ref` 获取当前画布模板 JSON,用于预览 / 保存 / 截图。 - 模板加载 / 重置(如「加载默认布局」)属于宿主业务:把新的 `TemplateData` 赋给 `initial-template` 即可重载画布并记录一次历史(撤销可回退),设计器工具栏不内置该入口。 - `PrintHtmlPreview`:同构预览组件,`template-json` 传画布模板 JSON,`print-data` 传业务数据, 事件 `rendered` 回调预览页数,`ref.print()` 触发打印。 ## 静默打印(桌面客户端) 跨平台(Windows / Linux / macOS)静默打印由两部分组成: - **桌面打印客户端**(`clients/print-client`,Electron):部署在业务工位电脑上,在隐藏窗口内复用 `core/browser` 同构渲染模板, 再调用 `webContents.print({ silent: true })` 直接出纸——无系统打印对话框、不依赖浏览器插件。 - **浏览器端 SDK**(core 子路径 `@worm-vue3-print/core/client`,无需单独安装):浏览器页面通过 WebSocket(默认从 `127.0.0.1:17521` 起端口探测,占用则 +1) 连接本机运行的客户端,完成端口探测 / 自动重连 / 打印机枚举 / 静默打印。 ### 安装并运行客户端 客户端是 monorepo 内的私有工作区包(不发布 npm),产物为绿色目录或安装包,需在工位电脑安装并运行: ```bash # 在仓库根构建并产出安装包(macOS 可同时交叉打包 Windows) npm run pack:client # 绿色目录版(免安装,各平台只能在本平台构建自家产物) npm run pack:client:dir ``` ### 宿主侧接入(浏览器端 SDK) ```ts import { PrintClient, WormPrintError } from '@worm-vue3-print/core/client' const client = new PrintClient() client.onStatusChange((s) => console.log('客户端状态:', s)) // 'disconnected' | 'connecting' | 'connected' await client.connect() // 自动探测端口并握手;客户端未运行抛 CLIENT_NOT_RUNNING const printers = await client.listPrinters() // 枚举本机打印机 // 连续纸(CONTINUOUS)模板无需传纸高,客户端按渲染内容自动推导;长度单位均为微米(1mm = 1000μm) const { jobId } = await client.print(templateJson, printData, { printerName: printers[0]?.name, copies: 1, }) client.pair(token) // 安全配对:客户端开启「安全开关」后,用配置窗口展示的 token 配对一次 ``` - 断线自动指数退避重连;失败抛 `WormPrintError`,按 `err.code` 分支处理(`PRINTER_NOT_FOUND`、`BUSY`、`PRINT_FAILED` 等)。 - SDK 完整接口见 [静默打印指南](docs/中文/指南/静默打印.md); 客户端原理、协议与打包见 [`clients/print-client/README.md`](clients/print-client/README.md)。 ## 渲染服务 服务端渲染位于本仓库 monorepo 的 `services/print-render`(私有服务包,不发布 npm): 基于 Playwright 提供服务端 PDF / 截图渲染微服务(`/render/pdf`、`/render/screenshot`), 通过 workspace 本地软链依赖 `core` 渲染管线,与浏览器预览、桌面客户端共用同一份实现;测量、连续纸探针、码制渲染与出图由 core 的 DOM 执行器在页面上下文执行。 ```bash # 本地开发(首次需 npx playwright install chromium,macOS 可直接使用系统 Chrome) npm run dev:render # Docker 构建(在仓库根执行) docker build -f services/print-render/Dockerfile -t worm-vue3-print-render . ``` 详见 [`services/print-render/README.md`](services/print-render/README.md)。 ## 开源 - License:MIT(见 `LICENSE`)。 - 清晰的分层边界:`core`(纯逻辑)→ `canvas`(设计器 UI)。 - 发布与协作流程见 `CONTRIBUTING.md`。 ## 依赖与开源协议(商用合规说明) 本项目采用 **MIT 协议**,商用、二次分发、闭源集成、修改后对外提供服务、二次销售均**无需授权申请、无需付费、无需开源你的业务代码**,唯一义务是保留本项目版权声明(`Copyright (c) 2026 Worm Base AI`)。 ### 运行时依赖清单与协议 以下是会被打进发布产物或随服务分发的**运行时依赖**,逐一经审计: | 依赖 | 协议 | 所在模块 | 用途 | 商用影响 | | --- | --- | --- | --- | --- | | `jsbarcode` | MIT | core / canvas | 一维条码渲染 | 无限制 | | `qrcode` | MIT | core / canvas | 二维码渲染 | 无限制 | | `dompurify` | MPL-2.0 **或** Apache-2.0(双许可,可选) | canvas | HTML 富文本 XSS 净化 | 无限制 | | `sortablejs` | MIT | canvas | 图层/列表拖拽排序 | 无限制 | | `lucide-vue-next` | ISC | canvas | 工具栏图标 | 无限制 | | `express` | MIT | render 服务 | HTTP 接口层 | 无限制 | | `playwright` | Apache-2.0 | render 服务 | Headless Chromium 输出 PDF/截图 | 无限制 | | `ws` | MIT | 桌面客户端 | 本地 WebSocket 静默打印通道 | 无限制 | ### 审计结论 - **不含任何 GPL / AGPL / LGPL / SSPL / CPAL 等强 copyleft 协议**,不存在「因依赖传染而被迫开源你自有代码」的风险。 - 唯一的弱 copyleft 来源是 `dompurify` 的 MPL-2.0 分支。MPL 只约束该库自身的源文件,且它同时授予 Apache-2.0 选项——**按 Apache-2.0 使用即可,本项目按 Apache-2.0 口径处理**,无任何附加义务。 - 开发期依赖(Vite、TypeScript、Vitest、vue-tsc 等,含 Electron 构建链)为 MIT / Apache-2.0 / BSD-3-Clause,**不进入发布产物、不随你的应用分发**,不构成下游义务。 - `playwright` 下载的 Chromium 二进制为 BSD-style 许可,可自由用于商业用途(含售卖生成的 PDF);如需随 Docker 镜像分发,保留其声明文件即可。 - 依赖树共 545 个包(含 dev)已逐包核对 `license` 字段,无缺失声明、无 `NONE`/`SEE LICENSE IN` 之类不透明条目。 ### 你需要做什么 **什么都不用做。** 若你把本库作为依赖集成进产品,且产品需要列出第三方许可清单(OSS Notice),可直接引用上表;本项目自身的 `LICENSE` 文件建议随产物一并保留。 > 本说明基于对项目依赖的静态审计,随版本更新维护。协议原文以各依赖官方仓库与 `LICENSE` 文件为准;本文不构成法律意见,重大商业决策请咨询法务。 ## 仓库地址 - Gitee:https://gitee.com/liulong_oschina/worm-vue3-print - GitHub:https://github.com/worm-longliu/worm-vue3-print ## 抖音 & 赞赏 本项目基于 MIT 协议免费开源,赞赏纯属自愿、与授权和服务无关。 如果这套工具帮到了你,欢迎扫码请作者喝杯咖啡;赞赏后请在 [Issue](https://github.com/worm-longliu/worm-vue3-print/issues) 留言昵称,我会登记进 [赞赏名单](SPONSORS.md)(仅公开昵称与日期,金额私有不公示)。

抖音码      微信赞赏码      支付宝赞赏码