vg-print 1.1.205 → 1.1.207

package/README.en.md

@@ -181,6 +181,9 @@ const onSaveDirect = () => designer.value?.save()
 - `showPdf: boolean` Show "Export PDF" button, default `true`
 - `showImg: boolean` Show "Export Image" button, default `true`
 - `showPrint2: boolean` Show "Direct Print" button, default `true`
+- `showPrinterSelect: boolean` Show printer selector area, default `true`
+- `dialogTitle: string` Modal title, default `打印预览`
+- `showTitle: boolean` Show title in modal, default `true`
 - `modalShow: boolean` Modal visibility (supports `v-model:modalShow`)
 - `width: string | number` Modal width (default `'80%'`)
 - `defaultLang: string` Component i18n language (used when Standalone); supports `cn`, `en`, `de`, `es`, `fr`, `it`, `ja`, `ru`, `cn_tw`; default `cn`
@@ -205,6 +208,8 @@ const onSaveDirect = () => designer.value?.save()
   <el-button @click="openPreview">Show Preview</el-button>
   <Preview
     ref="previewRef"
+    :show-title="false"
+    dialog-title="自定义预览标题"
     v-model:modalShow="visible"
     default-lang="cn"
     :printerList="printers"
@@ -228,7 +233,48 @@ const data = { title: 'Report', name: 'DongDong' }
 
 const openPreview = () => {
   const tpl = createTemplate(tmplJson) // Or pass hiprint.PrintTemplate
-  previewRef.value.show(tpl, data, '80%')
+  // vue2方式：
+  previewRef.value?.show(tpl, data, '80%')
+  // 或
+  previewRef.value?.show(tpl, data)
+  // 或
+  previewRef.value?.show(tpl, data, {
+    width: '80%',
+    dialogTitle: '自定义预览',
+    showTitle: false,
+    showPdf: false,
+    showImg: false,
+    showPrint2: false,
+    showPrinterSelect: false,
+    onClick: (type) => {
+      // 示例：点击导出 PDF 按钮
+      if (type === 'pdf') {
+        console.log('[Preview onClick] 导出 PDF')
+        return
+      }
+      console.log('[Preview onClick]', type)
+    },
+    onClose: () => {
+      // 示例：弹窗关闭
+      console.log('[Preview onClose] 弹窗已关闭')
+    },
+    onRender: () => {
+      // 示例：预览内容渲染完成
+      console.log('[Preview onRender] 预览内容渲染完成')
+    },
+    callBackOptions: {
+      statusCallback: (status) => {
+        // 示例：导出进度（PDF/图片）
+        if (status.type === 'pdf:progress' || status.type === 'image:progress') {
+          const cur = status?.payload?.cur ?? 0
+          const total = status?.payload?.total ?? 0
+          console.log('[Preview progress]', cur, total)
+          return
+        }
+        console.log('[Preview status]', status.type, status.message || '')
+      }
+    }
+  })
 }
 </script>
 ```
@@ -494,4 +540,4 @@ await exportImage(tpl, printData, {
 
 ## Full Example
 
-(See the code block in the Chinese section or above)
+(See the code block in the Chinese section or above)

package/README.md

@@ -1,12 +1,12 @@
 # vg-print
 
-[开源免费]一个开箱即用的打印设计器组件库（Vue 3）。现在聚焦于单一组件 `FullDesigner`，同时暴露底层 `hiprint` 能力与客户端直连（`hiwebSocket`）配置，便于快速集成模板设计、预览、浏览器打印、导出 PDF/图片、直接打印等功能。
+[开源免费]一个开箱即用的打印设计器组件库（Vue 3）。现在聚焦于单一组件 `FullDesigner`，同时暴露底层 `hiprint` 能力与客户端直连（`hiwebSocket`）配置，便于快速集成模板设计、预览、浏览器打印、导出 PDF/图片、直接打印、客户端生成pdf/图片、数据源管理、多语言支持等功能。
 - 您可以直接安装引入体验功能.功能在不断完善中，请及时更新使用，欢迎反馈与建议，共同成长
 - 没有域名限制,无网可用. 随时提供帮助和解决问题.
 - npm搜索vg-print.
 - 联系我加 QQ: 984239686 或使用首页有微信加入群聊解决问题.
 
-> **Vue 2 版本**: 如果你使用的是 Vue 2+webpack4.0以上，请查看 [vg-print-vue2](https://www.npmjs.com/package/vg-print-vue2)
+> **Vue 2 版本**: 如果你使用的是 Vue2+webpack4.0以上，请查看 [vg-print-vue2](https://www.npmjs.com/package/vg-print-vue2)
 
 [vg-print开发者文档](https://www.yuque.com/designdev/vg-print)
 
@@ -100,7 +100,7 @@ hiprint.register({
 - 全功能页面组件 `FullDesigner`，直接使用，无需拼装子组件
 - 支持预览、浏览器打印、导出 PDF/图片、直接打印（需客户端）
 - 通过属性配置 `hiwebSocket` 的 `host`、`token` 与自动连接
-- 暴露实例方法：预览、打印、导出、连接控制等，外部可直接调用
+- 暴露实例方法：预览、打印、导出、客户端生成pdf/图片等，外部可直接调用
 - 集成并导出 `hiprint`，可进行模板对象级的高级定制
 
 
@@ -257,13 +257,24 @@ const onSaveDirect = () => designer.value?.save()
 - `printData: object | array` 打印数据
 - `printerList: Array<{ name: string; label: string }>` 打印机列表
 - `selectedPrinter: string` 选中的打印机名称
+- `dialogTitle: string` 弹窗标题，默认 `打印预览`
+- `dialogTitleHtml: string` 弹窗标题 HTML 内容，默认 `''`（支持 `弹窗标题）
+- `showTitle: boolean` 是否显示标题，默认 `true`
 - `showPdf: boolean` 是否显示“导出 PDF”按钮，默认 `true`
 - `showImg: boolean` 是否显示“导出图片”按钮，默认 `true`
 - `showPrint2: boolean` 是否显示“直接打印”按钮，默认 `true`
+- `showPrinterSelect: boolean` 是否显示“打印机选择”下拉区域，默认 `true`
 - `modalShow: boolean` 弹窗显隐（支持 `v-model:modalShow`）
 - `width: string | number` 弹窗宽度（默认 `'80%'`）
 - `defaultLang: string` 组件内 i18n 语言（Standalone 时使用）；支持 `cn`、`en`、`de`、`es`、`fr`、`it`、`ja`、`ru`、`cn_tw`；默认 `cn`
 
+预览头部标题使用
+- 传纯文本（原有方式）：
+- dialogTitle: '预览单据'
+- 传带标签 HTML：
+- dialogTitleHtml: '<span class="my-title"><i>订单</i>预览</span>'
+- 用插槽完全自定义（推荐，样式控制最灵活）：
+- <template #title="{ title, html }">...</template>
 ### 事件（Emits）
 
 - `update:modalShow` 双向绑定弹窗显隐
@@ -272,10 +283,48 @@ const onSaveDirect = () => designer.value?.save()
 
 ### 暴露方法（defineExpose）
 
-- `show(template, data, width?)` 显示并渲染预览内容；可传入模板/数据与弹窗宽度
+- `show(template, data, width?)` 显示并渲染预览内容（兼容旧调用）
+- `show(template, data, options?)` 显示并渲染预览内容（推荐）
+- `show(template, data, width, options?)` 同时传入宽度与高级回调参数
 - `hideModal()` 关闭弹窗
 - `init()` 初始化（内部使用）
-- `getTarget()` 获取预览容器 DOM
+- `getTarget()` 获取当前 `hiprintTemplate` 实例
+
+
+### show 方法高级参数（options）
+- 始终回调 { type, message, payload }
+- 但只有“异常/进度”场景才会带 message 或 payload
+- 普通状态（如 show:start 、 render:done 、 image:done ）没有额外信息，所以就是 undefined
+
+```ts
+type PreviewShowOptions = {
+  width?: string | number
+  dialogTitle?: string
+  dialogTitleHtml?: string
+  showPdf?: boolean
+  showImg?: boolean
+  showPrint2?: boolean
+  showPrinterSelect?: boolean
+  showTitle?: boolean
+  onClick?: (type: 'pdf' | 'img' | 'print' | 'print2' | 'close') => void
+  onClose?: () => void
+  onRender?: () => void
+  callBackOptions?: {
+    statusCallback?: (status: {
+      type:
+        | 'show:start' | 'show:ready'
+        | 'render:start' | 'render:done' | 'render:error'
+        | 'pdf:start' | 'pdf:progress' | 'pdf:done' | 'pdf:error'
+        | 'image:start' | 'image:progress' | 'image:done' | 'image:error'
+        | 'print:start' | 'print:done' | 'print:error'
+        | 'directPrint:start' | 'directPrint:progress' | 'directPrint:done' | 'directPrint:error'
+        | 'close'
+      message?: string
+      payload?: any
+    }) => void
+  }
+}
+```
 
 ### 使用示例（单独使用）
 
@@ -284,6 +333,8 @@ const onSaveDirect = () => designer.value?.save()
   <el-button @click="openPreview">显示预览</el-button>
   <Preview
     ref="previewRef"
+    :show-title="false"
+    dialog-title="自定义预览标题"
     v-model:modalShow="visible"
     default-lang="cn"
     :printerList="printers"
@@ -305,9 +356,56 @@ const printer = ref('')
 const tmplJson = { panels: [ /* ... */ ] }
 const data = { title: '病理图文报告', name: '东东' }
 
+// show(template, data, width?)
+// 参数说明：
+// 1) template: createTemplate(...) 返回的模板实例（或 hiprint.PrintTemplate）
+// 2) data: 打印数据（对象或数组）
+// 3) width: 弹窗宽度；支持百分比字符串（如 '80%'）或数字（如 980，单位 px）
 const openPreview = () => {
   const tpl = createTemplate(tmplJson) // 也可传入 hiprint.PrintTemplate
-  previewRef.value.show(tpl, data, '80%')
+  // vue2方式：
+  previewRef.value?.show(tpl, data, '80%')
+  // 或
+  previewRef.value?.show(tpl, data)
+  // 或
+  previewRef.value?.show(tpl, data, {
+    width: '80%',
+    dialogTitle: '自定义预览',
+    dialogTitleHtml: '<h2>自定义预览标题</h2>',
+    showTitle: false,
+    showPdf: false,
+    showImg: false,
+    showPrint2: false,
+    showPrinterSelect: false,
+    onClick: (type) => {
+      // 示例：点击导出 PDF 按钮
+      if (type === 'pdf') {
+        console.log('[Preview onClick] 导出 PDF')
+        return
+      }
+      console.log('[Preview onClick]', type)
+    },
+    onClose: () => {
+      // 示例：弹窗关闭
+      console.log('[Preview onClose] 弹窗已关闭')
+    },
+    onRender: () => {
+      // 示例：预览内容渲染完成
+      console.log('[Preview onRender] 预览内容渲染完成')
+    },
+    callBackOptions: {
+      statusCallback: (status) => {
+        // 示例：导出进度（PDF/图片）
+        if (status.type === 'pdf:progress' || status.type === 'image:progress') {
+          const cur = status?.payload?.cur ?? 0
+          const total = status?.payload?.total ?? 0
+          console.log('[Preview progress]', cur, total)
+          return
+        }
+        console.log('[Preview status]', status.type, status.message || '')
+      }
+    }
+  })
 }
 </script>
 ```
@@ -340,6 +438,7 @@ const showCustomPreview = () => {
 
 - 使用组件库时请引入 `vg-print/style.css`，其中包含自定义图标字体与预览/设计样式。
 - `Preview` 内部会根据 `printTemplate` 与 `printData` 自动渲染内容；也支持通过 `show(...)` 主动传入。
+- `show(...)` 兼容原签名 `show(template, data, width?)`，建议新项目统一使用 `options` 写法，便于扩展和维护。
 - 若在外部项目未安装插件（未执行 `app.use(vgPrint)`）而单独使用 `Preview`，请通过 `default-lang` 显式设置语言；安装插件时无需设置，语言默认随全局 i18n。
 
 

package/dist/{chunk-MW6X4KTL-BcL0iwUt.js → chunk-MW6X4KTL-Fna8JcZ0.js}

@@ -1,4 +1,4 @@
-import { l as b } from "./index-DIcTZZ1w.js";
+import { l as b } from "./index-B8EY3cmT.js";
 function M(e) {
   return typeof e == "string" && /^data:image\/svg\+xml/i.test(e);
 }

package/dist/{chunk-Q2Z2CG2I-WPpWTILY.js → chunk-Q2Z2CG2I-tfOKKf-3.js}

@@ -1,4 +1,4 @@
-import { W as a } from "./chunk-MW6X4KTL-BcL0iwUt.js";
+import { W as a } from "./chunk-MW6X4KTL-Fna8JcZ0.js";
 async function o(r, t) {
   let i = await a(r, t), e = new Image();
   return e.src = i.toDataURL(`image/${t.format}`, t.quality), await e.decode(), e.style.width = `${i.width / t.dpr}px`, e.style.height = `${i.height / t.dpr}px`, e;

package/dist/{chunk-Y7FY32AO-CKFAwivO.js → chunk-Y7FY32AO-NbE7aDO_.js}

@@ -1,4 +1,4 @@
-import { W as m } from "./chunk-MW6X4KTL-BcL0iwUt.js";
+import { W as m } from "./chunk-MW6X4KTL-Fna8JcZ0.js";
 async function a(n, e) {
   let o = e.type;
   if (o === "svg") {

package/dist/{download-ubFsGJHN.js → download-D2ZvdiU7.js}

@@ -1,5 +1,5 @@
-import { m as f } from "./chunk-Y7FY32AO-CKFAwivO.js";
-import { W as t } from "./chunk-MW6X4KTL-BcL0iwUt.js";
+import { m as f } from "./chunk-Y7FY32AO-NbE7aDO_.js";
+import { W as t } from "./chunk-MW6X4KTL-Fna8JcZ0.js";
 async function w(n, e) {
   let c = ((e == null ? void 0 : e.format) || (e == null ? void 0 : e.type) || "").toLowerCase(), a = c === "jpg" ? "jpeg" : c || "png", i = (e == null ? void 0 : e.filename) || `snapdom.${a}`, o = { ...e || {}, format: a, type: a };
   if (o.dpr = 1, a === "svg") {