{"_id":"zksdb-report-designer","_rev":"28-aa1cbc96e067d2c45817143b6bfd27e0","name":"zksdb-report-designer","dist-tags":{"latest":"0.0.19"},"versions":{"1.7.33":{"name":"zksdb-report-designer","version":"1.7.33","license":"AGPL-3.0-only","_id":"zksdb-report-designer@1.7.33","maintainers":[{"name":"zksdb6","email":"zksdb6@163.com"}],"homepage":"https://zksdb.com","bugs":{"url":"https://github.com/kshdb/report_designer/issues"},"dist":{"shasum":"ce32288ac45226ad3e5aa4fdae55df4343760f2a","tarball":"https://registry.npmjs.org/zksdb-report-designer/-/zksdb-report-designer-1.7.33.tgz","fileCount":11,"integrity":"sha512-UxJxBl6y0VqOaGotp2QGJEjwGAWrcMEgL9YQb5qceWrWGYCEtDk/Xui0scsNefyJ+/FMuzyf5ZS5ASydM1X+7Q==","signatures":[{"sig":"MEYCIQDlkdiT++z74RcPqMFEQjtixWw/Fu9txFhM+oYm9HIZHgIhALzgbMbNO1nM7BNdMkNeh01bmn2X+RvE2RgA5wlssNSw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11501596},"main":"dist/zksdb-report-designer.umd.js","type":"module","style":"dist/zksdb-report-designer.css","types":"dist/web-component.d.ts","module":"dist/zksdb-report-designer.es.js","exports":{".":{"types":"./dist/web-component.d.ts","import":"./dist/zksdb-report-designer.es.js","require":"./dist/zksdb-report-designer.umd.js"},"./style.css":"./dist/zksdb-report-designer.css"},"gitHead":"15bd0a6255356440b5e11a5696b792bf07b644a0","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:wc":"vue-tsc -b && vite build --config vite.config.wc.ts && node ./scripts/copy-wc-types.mjs"},"_npmUser":{"name":"zksdb6","email":"zksdb6@163.com"},"deprecated":"弃用","repository":{"url":"git+https://github.com/kshdb/report_designer.git","type":"git"},"_npmVersion":"10.9.3","description":"

\"Vue

","directories":{},"_nodeVersion":"22.18.0","dependencies":{"vue":"^3.5.13","pinia":"^2.3.0","lodash":"^4.17.21","qrcode":"^1.5.4","jsbarcode":"^3.12.3","pdfjs-dist":"^6.1.200","@guolao/vue-monaco-editor":"^1.6.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.1","terser":"^5.46.1","postcss":"^8.4.49","vue-tsc":"^2.1.10","ts-morph":"^28.0.0","typescript":"~5.6.2","@types/node":"^22.10.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.20","@types/lodash":"^4.17.13","@types/qrcode":"^1.5.6","@vue/tsconfig":"^0.7.0","unplugin-icons":"^23.0.1","@types/jsbarcode":"^3.11.4","@vitejs/plugin-vue":"^5.2.1","rollup-plugin-visualizer":"^7.0.1","@iconify-json/material-symbols":"^1.2.53"},"_npmOperationalInternal":{"tmp":"tmp/zksdb-report-designer_1.7.33_1783258714297_0.8109553151421856","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"zksdb-report-designer","version":"1.0.0","license":"AGPL-3.0-only","_id":"zksdb-report-designer@1.0.0","maintainers":[{"name":"zksdb6","email":"zksdb6@163.com"}],"homepage":"https://zksdb.com","dist":{"shasum":"6f4713026cf68fb9e82d60e81a2a11cca9aafc82","tarball":"https://registry.npmjs.org/zksdb-report-designer/-/zksdb-report-designer-1.0.0.tgz","fileCount":11,"integrity":"sha512-OC31kNC+by3G41y2woOjxu0nTvZPY4IBNZD/P+e9ZdZSJECHIGkToGnTSF2pUcgYLn//NvBTruh/NMnsfyykmg==","signatures":[{"sig":"MEQCIA53FgyUneMbYia/yw2Q3duGxr8dZIcSdsAZZCYLgOjxAiAzYjC5WJpIXx8wvVm13k6plDwmNbC5AH6Pc+lybodNeA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11496115},"main":"dist/zksdb-report-designer.umd.js","type":"module","style":"dist/zksdb-report-designer.css","types":"dist/web-component.d.ts","module":"dist/zksdb-report-designer.es.js","exports":{".":{"types":"./dist/web-component.d.ts","import":"./dist/zksdb-report-designer.es.js","require":"./dist/zksdb-report-designer.umd.js"},"./style.css":"./dist/zksdb-report-designer.css"},"gitHead":"002419b6a3f0db2113d3508a8b608dd5d3c4a174","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:wc":"vue-tsc -b && vite build --config vite.config.wc.ts && node ./scripts/copy-wc-types.mjs"},"_npmUser":{"name":"zksdb6","email":"zksdb6@163.com"},"deprecated":"弃用","repository":{"url":"git+https://github.com/kshdb/zksdb/zksdb-report-designer.git","type":"git"},"_npmVersion":"10.9.3","description":"

\"web可视化设计器\"

","directories":{},"_nodeVersion":"22.18.0","dependencies":{"vue":"^3.5.13","pinia":"^2.3.0","lodash":"^4.17.21","qrcode":"^1.5.4","jsbarcode":"^3.12.3","pdfjs-dist":"^6.1.200","@guolao/vue-monaco-editor":"^1.6.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.1","terser":"^5.46.1","postcss":"^8.4.49","vue-tsc":"^2.1.10","ts-morph":"^28.0.0","typescript":"~5.6.2","@types/node":"^22.10.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.20","@types/lodash":"^4.17.13","@types/qrcode":"^1.5.6","@vue/tsconfig":"^0.7.0","unplugin-icons":"^23.0.1","@types/jsbarcode":"^3.11.4","@vitejs/plugin-vue":"^5.2.1","rollup-plugin-visualizer":"^7.0.1","@iconify-json/material-symbols":"^1.2.53"},"_npmOperationalInternal":{"tmp":"tmp/zksdb-report-designer_0.0.1_1783299433028_0.6072466035486526","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"zksdb-report-designer","version":"0.0.2","license":"AGPL-3.0-only","_id":"zksdb-report-designer@0.0.2","maintainers":[{"name":"zksdb6","email":"zksdb6@163.com"}],"homepage":"https://zksdb.com","dist":{"shasum":"d98ecde9f14b2dbaf33f48faf04091239ba1787b","tarball":"https://registry.npmjs.org/zksdb-report-designer/-/zksdb-report-designer-0.0.2.tgz","fileCount":11,"integrity":"sha512-3Pd4DBRomj2fzfbU1rJRwPShzYYC/vrNIQsYrKQYNHBJV1LWuwHkb4G9BmFfXeiBrDd5EV9vpv0WJPGdLc5eqg==","signatures":[{"sig":"MEUCIQCtf9mIa4+RDAQFshbvVjjDmy7sbqgkK+q8efU8YJ89XAIgIdARggzuHT5iZOjWGiLVuCsronJZ40T9dvkmUrbbPE0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11500048},"main":"dist/zksdb-report-designer.umd.js","type":"module","style":"dist/zksdb-report-designer.css","types":"dist/web-component.d.ts","module":"dist/zksdb-report-designer.es.js","exports":{".":{"types":"./dist/web-component.d.ts","import":"./dist/zksdb-report-designer.es.js","require":"./dist/zksdb-report-designer.umd.js"},"./style.css":"./dist/zksdb-report-designer.css"},"gitHead":"002419b6a3f0db2113d3508a8b608dd5d3c4a174","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:wc":"vue-tsc -b && vite build --config vite.config.wc.ts && node ./scripts/copy-wc-types.mjs"},"_npmUser":{"name":"zksdb6","email":"zksdb6@163.com"},"deprecated":"弃用","repository":{"url":"git+https://github.com/kshdb/zksdb/zksdb-report-designer.git","type":"git"},"_npmVersion":"10.9.3","description":"

\n \"WEB报表打印设计器\"\n\n

\n\n

zksdb-report-designer

\n\n

可视化报表打印设计器  ·  标签 / 票据 / 表单全场景覆盖  ·  静默打印与云打印一体化

\n\n> **最新优化：** 移除 6 个第三方大包，首次加载体积减少约 **65%**；渲染引擎全链路自研，单页渲染耗时由约 **300 ms 降至 80 ms**（约 −73%）；多语言 2 → **6 种**，浏览器自动适配。\n\n\n---\n\nzksdb-report-designer 是一款可视化报表打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出与打印方式。\n\n---\n\n\n\n---\n\n## 核心特性\n\n- **可视化设计**：全功能拖拽设计器，支持文本 / 图片 / 表格 / 条码 / 二维码 / 形状等组件，内置标尺、网格与辅助对齐。\n- **智能分页**：自动处理长表格分页，支持表头 / 表尾重复，无需手写复杂逻辑，所见即所得。\n- **跨框架支持**：基于 Web Components，零依赖适配 Vue / React / Angular / 原生 HTML 等所有技术栈。\n- **全场景打印**：\n - **浏览器打印**：原生预览与打印。\n - **导出**：支持生成 PDF、图片（拼接 / 分片）。\n - **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。\n- **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机 / 份数 / 单双面 / DPI）。\n\n---\n\n## 升级记录\n- **v0.0.17**:\n 2026-07-14: 优化打印预览\n- **v0.0.14**:\n 2026-07-14: 重新优化设计器结构\n- **v0.0.13**:\n 2026-07-13: 优化设计器图标\n- **v0.0.12**:\n 2026-07-13: 优化打印及打印预览样式\n- **v0.0.11**:\n 2026-07-13: 优化打印预览窗口给外部调用\n- **v0.0.10**:\n 2026-07-13: 优化打印预览\n- **v0.0.9**:\n 2026-07-12: 新增导出excel功能\n- **v0.0.8**:\n 2026-07-11 优化直线 图片 文本 条码 二维码 旋转 优化单元格对齐\n- **-v0.0.7**:\n 2026-07-11 修复编辑文本时,文本对齐与元素画布对齐的冲突bug\n---\n\n\n\n\n## 配套打印客户端（Zksdb Client）\n\nZksdb Client 是本项目的配套桌面客户端，用于连接本地打印机并执行静默打印任务。安装后，即可在浏览器中直接发起打印而无需弹窗确认。它提供服务控制、连接配置、打印记录、版本更新与打印预览等功能，帮助你在本地快速完成打印闭环。\n\n- **支持平台**：Windows / macOS / Linux\n- **关键能力**：自动发现并识别设备、稳定连接维护与转发队列、轻量后台运行、打印任务记录与版本更新提示\n\n---\n\n## 快速开始\n\n### 方式一：下载源码自行改造与集成 API\n\n适合有深度定制需求的团队。\n\n#### 环境要求\n\n- Node.js >= 16.0.0\n- npm >= 7.0.0 或 yarn / pnpm\n\n\n#### 安装\n\n```bash\nnpm i zksdb-report-designer\n# 或\npnpm add zksdb-report-designer\n# 或\nyarn add zksdb-report-designer\n```\n\n#### 1) 在 Vue 3 / Vite 中使用\n\n```ts\n// main.ts\nimport \"zksdb-report-designer\";\nimport \"zksdb-report-designer/style.css\";\n```\n\n```vue\n\n```\n\n#### 2) 初始化与调用分离（Vue 3 选项式 API）\n\n**设计器页面（初始化与编辑）**\n\n```vue\n\n\n\n```\n\n**业务页面（打印 / 导出调用）**\n\n```ts\nconst el = document.querySelector(\"zksdb-report-designer\") as any;\n\n// 打印\nawait el.print({ mode: \"browser\" });\n\n// 导出 PDF / 图片 / HTML / Blob\nawait el.export({ type: \"pdf\", filename: \"order-20240223.pdf\" });\nawait el.export({ type: \"html\", filename: \"order-20240223.html\" });\nconst pdfBlob = await el.export({ type: \"pdfBlob\" });\n```\n\n#### 3) 事件监听\n\n```ts\nel.addEventListener(\"ready\", () => {});\nel.addEventListener(\"printed\", (e) => {});\nel.addEventListener(\"exported\", (e) => {\n const blob = e.detail?.blob;\n});\nel.addEventListener(\"error\", (e) => {\n console.error(e.detail?.scope, e.detail?.error);\n});\n```\n\n---\n\n## 项目结构\n\n```\nsrc/ # 项目源码目录\n├── App.vue # 应用根组件\n├── main.ts # 应用启动入口\n├── style.css # 全局样式\n├── web-component.ts # Web Components 注册入口\n├── web-component.d.ts # Web Components 类型声明\n├── vite-env.d.ts # Vite 环境类型声明\n├── assets/ # 静态资源\n├── components/ # 页面与编辑器组件\n│ ├── PrintDesigner.vue # 设计器主容器组件\n│ ├── canvas/ # 画布区域组件\n│ ├── common/ # 通用组件（弹窗、选择器等）\n│ ├── elements/ # 打印元素组件（文本、图片、表格等）\n│ ├── layout/ # 布局组件（头部、侧栏、面板等）\n│ ├── print/ # 打印渲染组件\n│ └── properties/ # 属性配置组件\n├── composables/ # 组合式状态与行为封装\n├── constants/ # 常量定义\n├── locales/ # 国际化语言包\n├── stores/ # Pinia 状态管理\n├── types/ # 类型声明\n└── utils/ # 通用工具函数\n ├── print.ts # 兼容导出入口\n ├── print/ # 打印能力主目录\n │ ├── index.ts # 打印模块统一导出\n │ ├── usePrint.ts # 打印/导出流程编排入口\n │ ├── dom.ts # 打印相关 DOM 处理工具\n │ ├── printChannel.ts # 本地/远程打印通道\n │ ├── renderEngine.ts # 渲染引擎兼容导出入口\n │ └── renderEngine/ # 渲染引擎子模块目录\n │ ├── index.ts # 渲染引擎装配入口\n │ ├── types.ts # 渲染模块共享类型\n │ ├── pagination.ts # 分页算法与布局修正\n │ ├── iframeRenderer.ts # iframe 渲染实现\n │ └── imageRenderer.ts # 图片/PDF 渲染实现\n └── ... # 其他通用工具函数\n```\n\n---\n\n## 国际化\n\n项目内置 6 种语言：中文简体（zh）、中文繁体（zh-Hant）、英文（en）、日文（ja）、韩文（ko）、德文（de），默认根据浏览器语言自动检测，也可通过 API 手动设置。\n\n","readmeFilename":"README.md"}