@bluechaine/print-designer 0.1.0 → 0.1.2

package/README.en.md

@@ -66,7 +66,7 @@ const styleOption = {
 | `Designer` | Root component — panels, header, toolbar, preview |
 | `Header` | Top bar: file actions + optional quick-insert element tabs |
 | `Toolbar` | Undo/redo, alignment, z-index, font, lock, copy/paste, zoom, panel toggles |
-| `Preview` | Print preview modal (PDF / image when hiprint APIs are available) |
+| `Preview` | Print preview modal (browser / silent print / PDF / image export) |
 | `DragBox` | Reusable draggable / foldable floating panel shell |
 
 ## Customization
@@ -149,6 +149,109 @@ import { pluginApiImage } from '@bluechaine/print-designer/plugins/api-image'
 import { pluginViewCodeEdit } from '@bluechaine/print-designer/plugins/view-code-edit'
 ```
 
+## Silent print (print2)
+
+Silent printing requires the [electron-hiprint](https://gitee.com/CcSimple/electron-hiprint) desktop client (default port `17521`). `vue-plugin-hiprint` talks to it over socket.io and skips the browser print dialog.
+
+Optional peer: `socket.io-client@^4.5` (match your `vue-plugin-hiprint` version).
+
+### Inside the designer preview
+
+After opening preview:
+
+1. Click **Connect Client**
+2. Pick a printer from the dropdown
+3. Click **Silent Print** (`print2`)
+
+Or pass `:auto-connect="true"` to connect when the designer mounts.
+
+`previewOptions`:
+
+```ts
+const previewOptions = {
+  showBrowserPrint: true, // browser print button, default true
+  showPrint2: true,       // silent print button, default true
+}
+```
+
+### Programmatic use in the designer
+
+```ts
+function onDesigned(e: any) {
+  const utils = e.designerUtils
+
+  utils.setConnect(true, (connected) => {
+    if (!connected) return
+    const printers = utils.getPrinterList()
+    void utils.print2({ name: 'demo' }, {
+      printer: printers[0]?.name ?? '',
+      title: 'Outbound',
+    })
+  })
+}
+```
+
+Batch: pass an array to `print2`:
+
+```ts
+await utils.print2(orders, {
+  printer: 'Printer name',
+  title: 'Batch print',
+  printByFragments: true,
+})
+```
+
+### Browser batch print (no client required)
+
+You can print many records at once without electron-hiprint. The designer merges every record into a multi-page HTML and triggers the browser print dialog only once inside a hidden iframe.
+
+In preview:
+
+1. Pass an array as `printData`
+2. Set the copies-per-record value (default 1)
+3. Click **Batch Print** — the browser dialog opens just once
+
+Programmatic:
+
+```ts
+function onDesigned(e: any) {
+  const utils = e.designerUtils
+  const orders = [{ id: 1 }, { id: 2 }, { id: 3 }]
+  await utils.batchPrint(orders, {
+    copies: 2,    // 6 pages total
+    title: 'Batch outbound',
+  })
+}
+```
+
+Or call the helper directly:
+
+```ts
+import { batchPrint } from '@bluechaine/print-designer'
+await batchPrint(printTemplate, orders, { copies: 3 })
+```
+
+Best for human-confirmed batches. Unattended silent printing still requires `print2` + electron-hiprint.
+
+### Headless use in other projects
+
+Without mounting `Designer`, import `@bluechaine/print-designer/print-client`:
+
+```ts
+import { getPrintClient } from '@bluechaine/print-designer/print-client'
+
+const client = getPrintClient()
+
+const status = await client.connect({ host: 'http://localhost:17521' })
+if (!status.connected) throw new Error(status.message)
+
+const printers = client.getPrinterList()
+await client.printByTemplate(templateJson, printData, {
+  printer: printers[0]?.name ?? '',
+  title: 'Silent print',
+})
+```
+
 ## License
 
 MIT

package/README.md

@@ -63,7 +63,7 @@ const styleOption = {
 | `Designer` | 根组件，组装面板、顶栏、工具栏、预览 |
 | `Header` | 顶栏：文件操作 + 可选的元素快捷插入 |
 | `Toolbar` | 撤销/重做、对齐、层级、字号、锁定、复制粘贴、缩放、面板开关 |
-| `Preview` | 打印预览弹窗（支持 PDF / 图片导出，取决于 hiprint API） |
+| `Preview` | 打印预览弹窗（浏览器打印 / 静默打印 / PDF / 图片导出） |
 | `DragBox` | 可拖拽、可折叠的浮层面板容器 |
 
 ## 自定义
@@ -146,6 +146,123 @@ import { pluginApiImage } from '@bluechaine/print-designer/plugins/api-image'
 import { pluginViewCodeEdit } from '@bluechaine/print-designer/plugins/view-code-edit'
 ```
 
+## 静默打印（print2）
+
+静默打印需要安装 [electron-hiprint](https://gitee.com/CcSimple/electron-hiprint) 客户端（默认端口 `17521`）。`vue-plugin-hiprint` 通过 socket.io 与客户端通信，不弹出浏览器打印框。
+
+可选 peer：`socket.io-client@^4.5`（与 `vue-plugin-hiprint` 版本匹配）。
+
+### 设计器预览内使用
+
+打开预览后可：
+
+1. 点击 **连接客户端**
+2. 在下拉框选择打印机
+3. 点击 **静默打印**（`print2`）
+
+也可设置 `:auto-connect="true"`，设计器挂载后自动连接客户端。
+
+`previewOptions`：
+
+```ts
+const previewOptions = {
+  showBrowserPrint: true, // 浏览器打印按钮，默认 true
+  showPrint2: true,       // 静默打印按钮，默认 true
+}
+```
+
+### 设计器内编程调用
+
+```ts
+function onDesigned(e: any) {
+  const utils = e.designerUtils
+
+  utils.setConnect(true, (connected) => {
+    if (!connected) return
+    const printers = utils.getPrinterList()
+    void utils.print2({ name: '测试' }, {
+      printer: printers[0]?.name ?? '',
+      title: '出库单',
+    })
+  })
+}
+```
+
+批量打印：将数组传给 `print2`：
+
+```ts
+await utils.print2(orders, {
+  printer: '打印机名称',
+  title: '批量出库',
+  printByFragments: true,
+})
+```
+
+### 浏览器批量打印（无需客户端）
+
+不安装 electron-hiprint 也能批量打印 —— 设计器把多条数据合并成多页 HTML，在隐藏 iframe 中只触发一次浏览器打印对话框：
+
+预览弹窗内：
+
+1. 把多条数据传给 `printData`（支持数组）
+2. 在「每条份数」里填份数（默认 1）
+3. 点 **批量打印**，浏览器只弹一次打印框
+
+编程调用：
+
+```ts
+function onDesigned(e: any) {
+  const utils = e.designerUtils
+  const orders = [{ id: 1 }, { id: 2 }, { id: 3 }]
+  await utils.batchPrint(orders, {
+    copies: 2,    // 每条打印 2 份，共 6 页
+    title: '批量出库单',
+  })
+}
+```
+
+或直接调用底层函数：
+
+```ts
+import { batchPrint } from '@bluechaine/print-designer'
+await batchPrint(printTemplate, orders, { copies: 3 })
+```
+
+适用：偶发批量、人工确认场景；要无人值守静默打印仍推荐 `print2` + electron-hiprint。
+
+### Headless：其它项目独立调用
+
+不挂载 `Designer` 时，使用 `@bluechaine/print-designer/print-client`：
+
+```ts
+import { getPrintClient } from '@bluechaine/print-designer/print-client'
+
+const client = getPrintClient()
+
+const status = await client.connect({ host: 'http://localhost:17521' })
+if (!status.connected) throw new Error(status.message)
+
+const printers = client.getPrinterList()
+await client.printByTemplate(templateJson, printData, {
+  printer: printers[0]?.name ?? '',
+  title: '静默打印',
+})
+
+// 批量
+await client.printByTemplate(templateJson, [row1, row2, row3], {
+  printer: '打印机名称',
+  title: '批量打印',
+})
+```
+
+事件订阅：
+
+```ts
+client.onConnectionChange((status) => console.log(status))
+client.onPrintSuccess((data) => console.log('done', data))
+client.onPrintError((err) => console.error(err))
+```
+
 ## 许可
 
 MIT