vg-print 1.1.219 → 1.1.221

package/README.md

@@ -1,10 +1,13 @@
 # vg-print
 
-[开源免费]一个开箱即用的打印设计器组件库（Vue 3）。现在聚焦于单一组件 `FullDesigner`，同时暴露底层 `hiprint` 能力与客户端直连（`hiwebSocket`）配置，便于快速集成模板设计、预览、浏览器打印、导出 PDF/图片、直接打印、客户端生成pdf/图片、数据源管理、多语言支持等功能。
+\[开源免费]一个开箱即用的打印设计器组件库（Vue 3）。现在聚焦于单一组件 `FullDesigner`，同时暴露底层 `hiprint` 能力与客户端直连（`hiwebSocket`）配置，便于快速集成模板设计、预览、浏览器打印、导出 PDF/图片、直接打印、客户端生成pdf/图片、数据源管理、多语言支持等功能。
+
 - 您可以直接安装引入体验功能.功能在不断完善中，请及时更新使用，欢迎反馈与建议，共同成长
 - 没有域名限制,无网可用. 随时提供帮助和解决问题.
 - npm搜索vg-print.
-- 联系我加 QQ: 984239686 或使用首页有微信加入群聊解决问题.
+  ```vue
+  ```
+- imageQuality联系我加 QQ: 984239686 或使用首页有微信加入群聊解决问题.
 
 > **Vue 2 版本**: 如果你使用的是 Vue2+webpack4.0以上，请查看 [vg-print-vue2](https://www.npmjs.com/package/vg-print-vue2)
 
@@ -21,22 +24,18 @@
     - 有授权（已注册有效 `authKey`）：
       - 面板未填写内容 → 不显示水印（默认水印被移除）
       - 面板填写了内容 → 显示面板内容（无后缀）
-
 - 注册授权密钥（密钥添加除水印）：
   在项目入口（如 `main.js` 或 `App.vue`）尽早注册：
-
   ```js
   import { hiprint } from 'vg-print';
 
   // 填入生成的 Key
   hiprint.register({ authKey: 'eyJrIjoiZ21jNTc2MDMzNyJ9' });
   ```
-
   注册后，以下所有使用方式均会自动生效（移除默认水印）：
   - 完整设计器组件 `FullDesigner`
   - 核心类 `new hiprint.PrintTemplate(...)`
   - 轻量运行时 helper `createTemplate(...)`
-
 - 示例：轻量运行时使用授权
 
 ```js
@@ -87,8 +86,6 @@ hiprint.register({
 { content: 'vg-print', timestamp: true }
 ```
 
-
-
 ## 静默打印客户端工具安装包
 
 ![静默打印客户端工具](https://gitee.com/gao111/electron-vg-print/raw/master/electron-hiprint.png)
@@ -103,7 +100,6 @@ hiprint.register({
 - 暴露实例方法：预览、打印、导出、客户端生成pdf/图片等，外部可直接调用
 - 集成并导出 `hiprint`，可进行模板对象级的高级定制
 
-
 ## 安装
 
 ```bash
@@ -147,11 +143,11 @@ npm i vg-print
 
 ### 如果发现外部调用安装过程页面样式有丢失情况， 可以引入打印样式重要提醒需要复制
 
-【node_modules/@vg-print/hiprint/dist/css/print-lock.css】到开发资源目录。
- 例如: Vue 项目的 public 目录。 
- 假如你部署的网站是: https://www.abcd.com/index.html 
- 那么确保 https://www.abcd.com/print-lock.css 
- 能够正常访问在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】注意: media="print"
+【node\_modules/@vg-print/hiprint/dist/css/print-lock.css】到开发资源目录。
+例如: Vue 项目的 public 目录。
+假如你部署的网站是: <https://www.abcd.com/index.html>
+那么确保 <https://www.abcd.com/print-lock.css>
+能够正常访问在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】注意: media="print"
 可以调整成相对链接/自有链接，但【重要】名称需要一致（`print-lock.css`）：
 
 ```html
@@ -244,7 +240,7 @@ const onSaveDirect = () => designer.value?.save()
 
 > 提示：如需完全自定义按钮，请提供 `headerRight` 插槽实现自己的按钮布局。
 
----
+***
 
 ## Preview 预览组件
 
@@ -258,7 +254,7 @@ const onSaveDirect = () => designer.value?.save()
 - `printerList: Array<{ name: string; label: string }>` 打印机列表
 - `selectedPrinter: string` 选中的打印机名称
 - `dialogTitle: string` 弹窗标题，默认 `打印预览`
-- `dialogTitleHtml: string` 弹窗标题 HTML 内容，默认 `''`（支持 `弹窗标题）
+- `dialogTitleHtml: string` 弹窗标题 HTML 内容，默认 `''`（支持 \`弹窗标题）
 - `showTitle: boolean` 是否显示标题，默认 `true`
 - `showPdf: boolean` 是否显示“导出 PDF”按钮，默认 `true`
 - `showImg: boolean` 是否显示“导出图片”按钮，默认 `true`
@@ -273,12 +269,14 @@ const onSaveDirect = () => designer.value?.save()
 - `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>
+- \<template #title="{ title, html }">...</template>
+
 ### 事件（Emits）
 
 - `update:modalShow` 双向绑定弹窗显隐
@@ -294,8 +292,8 @@ const onSaveDirect = () => designer.value?.save()
 - `init()` 初始化（内部使用）
 - `getTarget()` 获取当前 `hiprintTemplate` 实例
 
-
 ### show 方法高级参数（options）
+
 - 始终回调 { type, message, payload }
 - 但只有“异常/进度”场景才会带 message 或 payload
 - 普通状态（如 show:start 、 render:done 、 image:done ）没有额外信息，所以就是 undefined
@@ -472,7 +470,6 @@ const showCustomPreview = () => {
 - `show(...)` 兼容原签名 `show(template, data, width?)`，建议新项目统一使用 `options` 写法，便于扩展和维护。
 - 若在外部项目未安装插件（未执行 `app.use(vgPrint)`）而单独使用 `Preview`，请通过 `default-lang` 显式设置语言；安装插件时无需设置，语言默认随全局 i18n。
 
-
 样式引入（确保设计与打印样式生效）：
 
 ```js
@@ -601,6 +598,7 @@ const disableAutoConnect = () => designer.value.disAutoConnect()
 ```
 
 自定义主题颜色字段说明（`theme.colors`）：
+
 - `accent: string` 主题强调色（影响：滚动条、选中态边框/高亮、部分 hover）
 - `accentSoft: string` 强调色浅背景（可选，建议 `rgba`；用于选中态/hover 底色，默认由 `accent` 自动生成）
 - `headerBg: string` Header/面板标题栏背景色（属性/结构/历史面板的标题栏也会使用）
@@ -640,7 +638,6 @@ const disableAutoConnect = () => designer.value.disAutoConnect()
 - `toPdf2()` 导出 PDF；支持自定义参数，如缩放比例、页边距等(通过@zumer/snapdom库插件)
 - `toImage()` 导出图片；使用内置 A4 排版示例参数导出
 - `toImage2()` 导出图片；支持自定义参数，如缩放比例、页边距等(通过@zumer/snapdom库插件)
-
 - `setHiwebSocket(host: string, token?: string, cb?: Function)` 设置客户端地址与令牌并尝试重连；`cb(status, msg)` 为连接回调
 - `connect(cb?: Function)` 主动连接客户端；`cb(status, msg)` 为连接回调
 - `disconnect()` 断开客户端连接
@@ -677,6 +674,7 @@ const onSave = ({ template, data, templateId }) => {
 }
 </script>
 ```
+
 ### 语言与国际化
 
 - 通过 `default-lang` 设置初始语言（`cn` 默认为中文）；内部会同步 `vue-i18n` 与 `hiprint` 的语言。
@@ -794,6 +792,11 @@ tpl.print({ name: '示例' }, {}, {
 
 // 直接打印（需客户端已连接）
 tpl.print2({ name: '示例' }, {
+  // 方式1 如果你发现传了 paperWidth/paperHeight 仍然偏移，再加上：forceClientPageSize: true 让客户端更强制按这个尺寸出纸
+  //paperWidth: 210,
+  //paperHeight: 279,
+  // 方式2
+  //forceClientPageSize: true, // 强制使用客户端页面大小，：偏“强制客户端按模板纸张尺寸打印，尽量压过驱动默认设置”（更激进）
   printer: '', // 打印机名称
   title: '打印预览pdf'
 });
@@ -1052,7 +1055,15 @@ ippPrint(options, callback, connectedCallback);
 ippRequest(options, callback);
 
 // 使用模板对象直接发起直连打印
-tpl.print2(printData, { printer: printers?.[0]?.name || '' })
+tpl.print2(printData, { 
+  // 方式1
+  //forceClientPageSize: true, // 强制使用客户端页面大小，：偏“强制客户端按模板纸张尺寸打印，尽量压过驱动默认设置”（更激进）
+  // 方式2 如果你发现传了 paperWidth/paperHeight 仍然偏移，再加上：forceClientPageSize: true 让客户端更强制按这个尺寸出纸
+  //paperWidth: 210,
+  //paperHeight: 279,
+  printer: printers?.[0]?.name || '',
+  title: '打印预览pdf'
+})
 
 // 7) 客户端生成（返回客户端保存路径，便于上传到服务器）
 const { pdfPath, imgPath } = await clientGenerate(tpl, printData, {
@@ -1132,7 +1143,7 @@ exportPdf2(tpl, printData, '打印预览pdf', {
   - 默认导出与预览一致（通常“一个模板一页”）。
   - `perPage` 在该模式下不生效（因为不做平铺排版）。
 
----
+***
 
 ### 导出图片（toImage / exportImage）
 
@@ -1196,7 +1207,7 @@ await exportImage(tpl, printData, {
   - `splitPages: false` 且 `limit > 0`：每 N 页合成长图。
   - `splitPages: false` 且 `limit <= 0`：所有页合成一张超长图（不推荐）。
 
----
+***
 
 ### 参数说明（PDF/图片通用，含描述）
 
@@ -1227,7 +1238,6 @@ await exportImage(tpl, printData, {
 - 后台页面、弹窗、任务流：仅需“模板 + 数据”的预览/打印/导出能力
 - 脚本或批量任务：结合 `exportPdf`/`exportImage` 实现批量导出
 
-
 ## 注意事项
 
 - 建议在 `index.html` 注入 `print-lock.css`，保证打印样式稳定
@@ -1310,3 +1320,4 @@ const onSave = ({ template, data, templateId }) => {
 }
 </script>
 ```
+