vg-print-vue2 1.0.603 → 1.0.604

package/README.md

@@ -118,7 +118,34 @@ async function exportReport(templateJson, printData, pdfOptions = {}) {
 
 原 `template.toPdf(data, name, options)`、`exportPdf()` 的参数、分页、标签拼版及返回值保持一致；例如 `isDownload: false, type: 'blob'` 可返回 PDF 数据。`clientGenerate()` 需要先生成 PDF，所以也必须注册该插件。
 
-未注入时，Preview 和 Header 的 PDF 按钮自动隐藏；Preview 的 `showPdf` / `show({ showPdf })` 及 Header 的 `showPdf` 仍可主动隐藏按钮。直接调用导出入口会提示缺少插件。库入口不内置插件，示例入口已注册；图片导出继续由核心提供。
+未注入时，Preview 和 Header 的 PDF 按钮自动隐藏；Preview 的 `showPdf` / `show({ showPdf })` 及 Header 的 `showPdf` 仍可主动隐藏按钮。直接调用导出入口会提示缺少插件。库入口不内置插件，示例入口已注册。
+
+### 可选图片导出插件
+
+图片导出已拆为 `@vg-print/plugin-api-image`，与 Vue 3 共用同一个插件；注册后原 `template.toImage(data, options)`、`exportImage()`、设计器和预览组件的图片导出继续使用。
+
+```bash
+npm install @vg-print/plugin-api-image
+```
+
+```js
+import { hiprint, createTemplate } from 'vg-print-vue2'
+import pluginApiImage from '@vg-print/plugin-api-image'
+
+async function exportImages(templateJson, printData) {
+  // 挂载设计器 / 预览组件前注入，可与 PDF、Word 插件一起注册。
+  await hiprint.register({ plugins: [pluginApiImage()] })
+  const template = createTemplate(templateJson)
+  return template.toImage(printData, {
+    isDownload: true, name: '报告', limit: 1,
+    type: 'image/png', pixelRatio: 2, toType: 'blob'
+  })
+}
+```
+
+未注入时 Header / Preview 的图片按钮自动隐藏，外部导出入口提示缺少插件。Header 的 `showImage` / FullDesigner 的 `show-option.showImage`、Preview 的 `showImg` / `show({ showImg })` 继续控制显示。图片和 PDF 插件独立；`clientGenerate()` 仍走 PDF 数据到客户端的流程，依赖 PDF 插件。
+
+核心不再直接导入或依赖 html2canvas / snapdom，由图片和 PDF 插件按需带入。开发示例使用 `file:../api-image` 与 Vite 别名，库入口不注册图片插件。默认值、分页、长图合并、标签拼版、进度和 Deferred 返回语义保持原实现；详见 [图片插件说明](../api-image/README.md)。
 
 ## 静默打印客户端工具安装包
 
@@ -1401,20 +1428,22 @@ exportPdf(tpl, printData, '打印预览pdf', {
 
 ### 导出图片（toImage / exportImage）
 
+需先安装并通过 `hiprint.register({ plugins: [pluginApiImage()] })` 注册图片插件，参见“可选图片导出插件”。默认不下载、每 10 页合并一张、截图倍率为 2；成功时下载与不下载都返回 URL/Blob 数组。
+
 > `exportImage(tpl, data, options)` 本质调用的是模板实例的 `tpl.toImage(data, options)`；两者参数一致。
 
 #### 模式 A：普通导出（按模板分页导出图片）
 
 ```js
 // 不传 paperWidth/paperHeight：按模板分页导出
-// splitPages: true 表示“每页一张图片”（推荐：避免长图占用太大内存）
+// limit: 1 表示每页一张图片；原方法未实现 splitPages 开关
 await exportImage(tpl, printData, {
   isDownload: true,
   name: '图片',
-  splitPages: true,
+  limit: 1,
   type: 'image/png',     // 含二维码/条码建议 png；纯文字/照片可 jpeg
   pixelRatio: 2,
-  quality: 0.8,          // 仅 JPEG 有效（0-1）
+  quality: 0.8,          // JPEG / WebP 编码质量（0-1）
   toType: 'blob',        // 推荐 blob（避免大 dataURL 阻塞）
   onProgress: (cur, total) => console.log('toImage 进度', Math.floor((cur / total) * 100))
 })
@@ -1445,21 +1474,22 @@ await exportImage(tpl, printData, {
   limit: 6,              // 每张“纸”放 6 个（不够的到下一张）
   isDownload: true,
   name: 'A4排版',
-  splitPages: true,      // 每张纸输出一张图片（文件名自动追加 -1/-2/...）
+  // 网格拼版时每张纸独立输出一张图片（文件名自动追加 -1/-2/...）
   type: 'image/png',
   pixelRatio: 2
 })
 ```
 
-#### 排版规则（重点：limit=0/不传的行为）
+#### 排版规则（沿用原方法）
 
 - 传入了纸张宽高（`paperWidth/paperHeight`）时：
-  - `limit > 0`：强制“每张纸 N 个”（等同于 PDF 的 `perPage`）。
-  - `limit = 0` 或不传 `limit`：自动计算“一张纸能放几个放几个”。
+  - `perPage` 优先于 `limit`，未传两者时默认 10，并受纸张实际容量限制。
+  - `perPage=0`（或仅 `limit=0`）自动填满；有效 perPage 大于 1 时指定每张纸数量。
+  - 有效 `perPage=1` 不触发网格拼版，继续走普通分页。
 - 没有传纸张宽高时：
-  - `splitPages: true`：每页一张图（推荐）。
-  - `splitPages: false` 且 `limit > 0`：每 N 页合成长图。
-  - `splitPages: false` 且 `limit <= 0`：所有页合成一张超长图（不推荐）。
+  - `limit=1`：每页一张图；未传 limit 默认每 10 页合成长图。
+  - `limit>0`：每 N 页合成长图；`limit<=0`：所有页合成一张超长图。
+  - 原图片方法没有实现 `splitPages` 开关，传入它不会改变分组。
 
 ***
 
@@ -1469,18 +1499,17 @@ await exportImage(tpl, printData, {
 - `usePaperType`：PDF/图片可用；为 `true` 时按模板的 `paperType`（如 A4）设置页面尺寸。
 - `scale` / `pixelRatio`：渲染缩放；`pixelRatio` 优先级高于 `scale`。值越大越清晰，但越耗时/耗内存。
 - `perPage`：PDF 排版模式每页模板数量；`0/不传` 表示自动填充。
-- `limit`：图片普通模式下用于“每 N 页合成长图”；图片排版模式下等同于“每张纸 N 个”；`0/不传` 表示自动填充（排版模式）或全量合成（普通模式，谨慎）。
-- `splitPages`：图片每页/每张纸输出一张（推荐）。
+- `limit`：图片默认 10；普通模式每 N 页合成长图，<=0 全量合成。拼版时作为 perPage 的后备值，0 自动填满，1 不触发网格。
+- `splitPages`：原图片方法未实现；普通模式每页一张请设置 limit=1，网格拼版模式自动每纸一张。
 - `type`：图片格式；`'image/jpeg'` 或 `'image/png'`（二维码/条码建议 png）。
-- `quality`：图片质量（0-1，仅 JPEG 有效）。
+- `quality`：图片质量（0-1，JPEG / WebP 有效）。
 - `toType`：返回类型（不下载时）；`'url'` 或 `'blob'`。
 - `isDownload`：是否自动触发下载。
 - `name`：文件名（图片会自动追加页码后缀）。
 - `leftOffset`、`topOffset`：排版对齐偏移（mm）；`-1` 表示居中，`>=0` 表示边距。
 - `onProgress(cur, total)`：导出进度回调；以 `cur/total` 计算百分比。
 - `forcePng`（PDF）：强制使用 PNG 写入 PDF（条码/二维码建议开启）。
-- `maxCanvasPixels`：单页最大画布像素上限；导出卡顿/崩溃时可调小（例如 `2e7`）。
-- `debugPerf`：输出每页渲染耗时到控制台，便于定位慢点。
+- 图片方法未实现 `maxCanvasPixels` / `debugPerf` 内置控制，其他扩展参数仍原样透传给 getHtml / 截图库。
 
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vg-print-vue2",
   "description": "vg-print supports visual drag and drop design templates, with functions such as previewing and exporting PDFs/images. Silent printing can be achieved in conjunction with a dedicated client",
-  "version": "1.0.603",
+  "version": "1.0.604",
   "author": "gmcSimple",
   "license": "MIT",
   "main": "dist/vg-print-vue2.cjs.js",
@@ -47,7 +47,8 @@
     "not ie <= 8"
   ],
   "devDependencies": {
-    "@vg-print/plugin-api-pdf": "0.1.1",
+    "@vg-print/plugin-api-image": "^0.1.2",
+    "@vg-print/plugin-api-pdf": "^0.1.1",
     "@vg-print/plugin-api-word": "^0.1.8",
     "@vg-print/plugin-bwip-js": "^0.1.2",
     "@vg-print/plugin-code-editor": "^0.1.9",
@@ -63,6 +64,7 @@
     "vue-template-compiler": "^2.7.16"
   },
   "peerDependencies": {
+    "@vg-print/plugin-api-image": "^0.1.2",
     "@vg-print/plugin-api-pdf": "^0.1.1",
     "@vg-print/plugin-api-word": "^0.1.8",
     "@vg-print/plugin-bwip-js": "^0.1.2",
@@ -73,6 +75,9 @@
     "vue": ">=2.7.0 <3"
   },
   "peerDependenciesMeta": {
+    "@vg-print/plugin-api-image": {
+      "optional": true
+    },
     "@vg-print/plugin-api-pdf": {
       "optional": true
     },
@@ -98,9 +103,7 @@
   "dependencies": {
     "@claviska/jquery-minicolors": "^2.3.6",
     "@noble/curves": "^1.9.7",
-    "@zumer/snapdom": "^2.0.2",
     "canvg": "^3.0.10",
-    "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
     "jsbarcode": "^3.11.5",
     "nzh": "^1.0.8",

package/dist/css/print-lock.css

@@ -1,307 +0,0 @@
-
-@media print {
-    /* Cancel the designer viewport rule when this file is loaded by the
-       browser-print iframe. */
-    html,
-    body {
-        height: auto !important;
-        min-height: 0 !important;
-        overflow: visible !important;
-    }
-    body {
-        margin: 0px;
-        padding: 0px;
-    }
-}
-
-@page {
-    margin: 0;
-}
-
-.hiprint-printPaper * {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box; /* Firefox */
-    -webkit-box-sizing: border-box; /* Safari */
-    image-rendering: -webkit-optimize-contrast; /* 让图片/标尺稍微清楚一点 */
-}
-
-    .hiprint-printPaper *:focus {
-        outline: -webkit-focus-ring-color auto 0px;
-    }
-
-
-.hiprint-page-break-avoid {
-    page-break-after: avoid;
-}
-.hiprint-printPaper {
-    position: relative;
-    padding: 0 0 0 0;
-    page-break-after: always;
-    break-after: page;
-    break-inside: avoid;
-    -webkit-user-select: none; /* Chrome/Safari/Opera */
-    -moz-user-select: none; /* Firefox */
-    user-select: none;
-    overflow-x: hidden;
-    overflow: hidden;
-}
-    .hiprint-printPaper .hiprint-printPaper-content {
-        position: relative;
-    }
-.hiprint-printPaper.design {
-    overflow: visible;
-}
-
-
-
-.hiprint-printTemplate .hiprint-printPanel {
-    page-break-after: always;
-}
-
-.hiprint-printPaper, hiprint-printPanel {
-    box-sizing: border-box;
-    border: 0px;
-}
-
-.hiprint-printPanel .hiprint-printPaper:last-child {
-    page-break-after: avoid;
-}
-
-.hiprint-printTemplate .hiprint-printPanel:last-child {
-    page-break-after: avoid;
-}
-
-.hiprint-printPaper .hideheaderLinetarget {
-    border-top: 0px dashed rgb(201, 190, 190) !important;
-}
-
-.hiprint-printPaper .hidefooterLinetarget {
-    border-top: 0px dashed rgb(201, 190, 190) !important;
-}
-
-.hiprint-printPaper.design {
-    border: 1px dashed rgba(170,170,170,0.7);
-}
-
-.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
-    overflow: hidden;
-    box-sizing: border-box;
-}
-
-.design .resize-panel {
-    box-sizing: border-box;
-    border: 1px dotted;
-}
-
-.hiprint-printElement-text {
-    background-color: transparent;
-    background-repeat: repeat;
-    padding: 0 0 0 0;
-    border: 0.75pt none rgb(0,0,0);
-    direction: ltr;
-    font-family: 'SimSun';
-    font-size: 9pt;
-    font-style: normal;
-    font-weight: normal;
-    padding-bottom: 0pt;
-    padding-left: 0pt;
-    padding-right: 0pt;
-    padding-top: 0pt;
-    text-align: left;
-    text-decoration: none;
-    line-height: 9.75pt;
-    box-sizing: border-box;
-    word-wrap: break-word;
-    word-break: break-all;
-}
-
-.design .hiprint-printElement-text-content {
-    border: 1px dashed rgb(206, 188, 188);
-    box-sizing: border-box;
-}
-
-.hiprint-printElement-longText {
-    background-color: transparent;
-    background-repeat: repeat;
-    border: 0.75pt none rgb(0,0,0);
-    direction: ltr;
-    font-family: 'SimSun';
-    font-size: 9pt;
-    font-style: normal;
-    font-weight: normal;
-    padding-bottom: 0pt;
-    padding-left: 0pt;
-    padding-right: 0pt;
-    padding-top: 0pt;
-    text-align: left;
-    text-decoration: none;
-    line-height: 9.75pt;
-    box-sizing: border-box;
-    word-wrap: break-word;
-    word-break: break-all;
-    /*white-space: pre-wrap*/
-}
-
-
-
-.hiprint-printElement-table {
-    background-color: transparent;
-    background-repeat: repeat;
-    color: rgb(0,0,0);
-    border-color: rgb(0,0,0);
-    border-style: none;
-    direction: ltr;
-    font-family: 'SimSun';
-    font-size: 9pt;
-    font-style: normal;
-    font-weight: normal;
-    padding-bottom: 0pt;
-    padding-left: 0pt;
-    padding-right: 0pt;
-    padding-top: 0pt;
-    text-align: left;
-    text-decoration: none;
-    padding: 0 0 0 0;
-    box-sizing: border-box;
-    line-height: 9.75pt;
-}
-
-    .hiprint-printElement-table thead {
-        background: #e8e8e8;
-        font-weight: 700;
-    }
-
-.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
-    border-color: rgb(0,0,0);
-    /*border-style: none;*/
-    /*border: 1px solid rgb(0,0,0);*/
-    font-weight: normal;
-    direction: ltr;
-    padding-bottom: 0pt;
-    padding-left: 4pt;
-    padding-right: 4pt;
-    padding-top: 0pt;
-    text-decoration: none;
-    vertical-align: middle;
-    box-sizing: border-box;
-    word-wrap: break-word;
-    word-break: break-all;
-    /*line-height: 9.75pt;
-    font-size: 9pt;*/
-}
-
-    /*.hiprint-printElement-tableTarget tr,*/
-    .hiprint-printElement-tableTarget td {
-        height: 18pt;
-    }
-
-/* 边框样式（用于打印时保持边框） */
-table.hiprint-printElement-tableTarget { width: 100%; }
-.hiprint-printElement-tableTarget-border-all { border: 1px solid; }
-.hiprint-printElement-tableTarget-border-none { border: 0px solid; }
-.hiprint-printElement-tableTarget-border-lr { border-left: 1px solid; border-right: 1px solid; }
-.hiprint-printElement-tableTarget-border-left { border-left: 1px solid; }
-.hiprint-printElement-tableTarget-border-right { border-right: 1px solid; }
-.hiprint-printElement-tableTarget-border-tb { border-top: 1px solid; border-bottom: 1px solid; }
-.hiprint-printElement-tableTarget-border-top { border-top: 1px solid; }
-.hiprint-printElement-tableTarget-border-bottom { border-bottom: 1px solid; }
-.hiprint-printElement-tableTarget-border-td-none td { border: 0px solid; }
-.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) { border-right: 1px solid; }
-.hiprint-printElement-tableTarget-border-td-all td { border-left: 1px solid; }
-.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child { border-left: none; }
-
-.hiprint-printPaper .hiprint-paperNumber {
-    font-size: 9pt;
-}
-
-.design .hiprint-printElement-table-handle {
-    position: absolute;
-    height: 12pt;
-    width: 12pt;
-    background: red;
-    z-index:1;
-}
-
-.hiprint-printPaper .hiprint-paperNumber-disabled {
-    float: right !important;
-    right: 0 !important;
-    color: gainsboro !important;
-}
-
-.hiprint-printElement-vline, .hiprint-printElement-hline {
-    border: 0px none rgb(0,0,0);
-
-}
-.hiprint-printElement-vline {
-    border-left: 0.75pt solid #000;
-    border-right: 0px none rgb(0,0,0) !important;
-    border-bottom: 0px none rgb(0,0,0) !important;
-    border-top: 0px none rgb(0,0,0) !important;
-}
-
-.hiprint-printElement-hline {
-    border-top: 0.75pt solid #000;
-    border-right: 0px none rgb(0,0,0) !important;
-    border-bottom: 0px none rgb(0,0,0) !important;
-    border-left: 0px none rgb(0,0,0) !important;
-}
-
-.hiprint-printElement-oval, .hiprint-printElement-rect {
-    border: 0.75pt solid #000;
-}
-
-.hiprint-text-content-middle {
-    display:table;
-}
-.hiprint-text-content-middle>div {
-    display: table-cell;
-    vertical-align:middle
-}
-
-.hiprint-text-content-bottom {
-    display: table;
-}
-
-    .hiprint-text-content-bottom > div {
-        display: table-cell;
-        vertical-align: bottom
-    }
-
-/*hi-grid-row */
-.hi-grid-row {
-    position: relative;
-    height: auto;
-    margin-right: 0;
-    margin-left: 0;
-    zoom: 1;
-    display: block;
-    box-sizing: border-box;
-}
-
-    .hi-grid-row::after, .hi-grid-row::before {
-        display: table;
-        content: '';
-        box-sizing: border-box;
-    }
-
-.hi-grid-col {
-    display: block;
-    box-sizing: border-box;
-    position: relative;
-    float: left;
-    flex: 0 0 auto;
-}
-
-.table-grid-row {
-    margin-left: -0pt;
-    margin-right: -0pt;
-}
-
-.tableGridColumnsGutterRow {
-    padding-left: 0pt;
-    padding-right: 0pt;
-}
-.hiprint-gridColumnsFooter {
-    text-align: left;
-    clear: both;
-}