vg-print 1.0.413 → 1.0.414

package/README.md

@@ -394,7 +394,7 @@ const designer = ref(null)
 const preview = () => designer.value.preView()
 // 浏览器打印
 const printBrowser = () => designer.value.printView()
-// 直接打印（需客户端已连接）
+// 导出 PDF
 const exportPdf = () => designer.value.toPdf()
 // 导出图片
 const exportImage = () => designer.value.toImage()
@@ -431,7 +431,10 @@ const disableAutoConnect = () => designer.value.disAutoConnect()
 - `printView()` 浏览器打印；不依赖客户端，调起系统打印对话框
 - `print()` 直接打印；需客户端已连接，按当前选定打印机输出
 - `toPdf()` 导出 PDF；使用内置 A4 排版示例参数导出
+- `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()` 断开客户端连接
@@ -535,6 +538,15 @@ tpl.toPdf(this.printDataVar, '打印预览pdf', {
     }
   }
 });
+// 这是使用@zumer/snapdom库插件导出PDF的示例，使用方式和toPdf一样
+tpl.toPdf2(this.printDataVar, '打印预览pdf', {
+  onProgress: (cur, total) => { 
+    // 导出进度100%的时候关闭等待
+    if (cur === total) {
+      this.loading = false
+    }
+  }
+});
 
 // 导出图片（内置示例参数） 
   // 导出为多张图片，每张合成 6 页，自动下载 JPEG     
@@ -571,6 +583,24 @@ tpl.toImage(this.printDataVar, {
     }
   }
 })
+
+// 这是使用@zumer/snapdom库插件导出图片的示例，使用方式和oImage一样
+tpl.toImage2(this.printDataVar, {
+  paperWidth: 210,
+  paperHeight: 297,
+  limit: 6,
+  isDownload: true,
+  name: 'A4排版',
+  type: 'image/jpeg',
+  pixelRatio: 2,
+  onProgress: (cur, total) => {
+    console.log('toImage 进度', Math.floor((cur/total)*100))
+    // 导出进度100%的时候关闭等待
+    if (cur === total) {
+      this.loading = false
+    }
+  }
+})
 ```
 
 水印与授权行为说明：设计态与运行态分离。设计态不自动显示默认水印（由面板设置项决定）；运行态按授权和面板内容合并控制。
@@ -585,7 +615,9 @@ import {
   getHtml,
   printBrowser,
   exportPdf,
+  exportPdf2,
   exportImage,
+  exportImage2,
   getPrinterList,
   refreshPrinterList,
   getAddress,
@@ -643,6 +675,19 @@ exportPdf(tpl, printData, '打印预览pdf', {
     }
 })
 
+// 插件方法
+exportPdf2(tpl, printData, '打印预览pdf', {
+  paperWidth: 210, 
+  paperHeight: 297, 
+  scale: 2, 
+  perPage: 6, 
+  leftOffset:-1, 
+  topOffset:-1, 
+  onProgress: (cur: number, total: number) => { 
+    console.log('toPdf 进度', Math.floor((cur/total)*100))
+  }
+})
+
 // 原生方法
 await exportImage(tpl, printData, {
    isDownload: true, 
@@ -658,6 +703,20 @@ await exportImage(tpl, printData, {
   }
 })
 
+// 插件方法
+exportImage2(tpl, printData, {
+  paperWidth: 210,
+  paperHeight: 297,
+  limit: 6,
+  isDownload: true,
+  name: 'A4排版',
+  type: 'image/jpeg',
+  pixelRatio: 2,
+  onProgress: (cur: number, total: number) => {
+    console.log('toImage 进度', Math.floor((cur/total)*100))
+  }
+})
+
 // 6) 客户端直连打印（需要本地客户端）
 setHiwebSocket('http://127.0.0.1:17521', 'your-token') // 遵循 autoConnect 状态
 // 或者使用标准 API（设置即连接）
@@ -722,6 +781,10 @@ disconnect()
 exportPdf(tpl, printData, '打印预览pdf', {
   onProgress: (cur, total) => console.log('toPdf 进度', Math.floor((cur / total) * 100))
 })
+
+exportPdf2(tpl, printData, '打印预览pdf', {
+  onProgress: (cur, total) => console.log('toPdf 进度', Math.floor((cur / total) * 100))
+})
 ```
 
 #### 模式 B：排版导出（把小模板拼到大纸张，例如 A4）
@@ -740,6 +803,16 @@ exportPdf(tpl, printData, '打印预览pdf', {
   scale: 2,             // 清晰度/性能权衡（也可用 pixelRatio）
   onProgress: (cur, total) => console.log('toPdf 进度', Math.floor((cur / total) * 100))
 })
+
+exportPdf2(tpl, printData, '打印预览pdf', {
+  paperWidth: 210,      // mm
+  paperHeight: 297,     // mm
+  perPage: 6,           // 每页放 6 个（不够的到下一页）
+  leftOffset: -1,       // -1 表示水平居中；>=0 表示左边距 mm
+  topOffset: -1,        // -1 表示垂直居中；>=0 表示上边距 mm
+  scale: 2,             // 清晰度/性能权衡（也可用 pixelRatio）
+  onProgress: (cur, total) => console.log('toPdf 进度', Math.floor((cur / total) * 100))
+})
 ```
 
 #### 排版规则（重点：perPage=0/不传的行为）
@@ -1256,6 +1329,9 @@ createApp(App).use(vgPrint).mount('#app')
 - `printView()` Browser print
 - `print()` Direct print
 - `toPdf()` Export PDF
+- `toPdf2()` Export PDF with paper layout
+- `toImage()` Export Image
+- `toImage2()` Export Image with paper layout
 - `toImage()` Export Image
 - `setHiwebSocket(host, token, cb)` Set client address/token (Respects autoConnect state)
 - `setHost(host, token, cb)` Set client address/token and connect immediately (Standard API)
@@ -1318,7 +1394,10 @@ exportPdf(tpl, printData, 'filename')
 `exportPdf` / `exportImage` are lightweight wrappers around the template instance methods:
 
 - `exportPdf(tpl, data, filename, options)` → `tpl.toPdf(data, filename, options)`
+- `exportPdf2(tpl, data, filename, options)` → `tpl.toPdf2(data, filename, options)`
+
 - `exportImage(tpl, data, options)` → `tpl.toImage(data, options)`
+- `exportImage2(tpl, data, options)` → `tpl.toImage2(data, options)`
 
 #### Export PDF
 

package/dist/chunk-MW6X4KTL-BVRq9FtF.js

@@ -0,0 +1,87 @@
+import { l as b } from "./index-DlSu6s5h.js";
+function M(e) {
+  return typeof e == "string" && /^data:image\/svg\+xml/i.test(e);
+}
+function C(e) {
+  let r = e.indexOf(",");
+  return r >= 0 ? decodeURIComponent(e.slice(r + 1)) : "";
+}
+function v(e) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`;
+}
+function F(e) {
+  let r = [], t = "", i = 0;
+  for (let o = 0; o < e.length; o++) {
+    let n = e[o];
+    n === "(" && i++, n === ")" && (i = Math.max(0, i - 1)), n === ";" && i === 0 ? (r.push(t), t = "") : t += n;
+  }
+  return t.trim() && r.push(t), r.map((o) => o.trim()).filter(Boolean);
+}
+function k(e) {
+  let r = [], t = "", i = 0;
+  for (let n = 0; n < e.length; n++) {
+    let s = e[n];
+    s === "(" && i++, s === ")" && (i = Math.max(0, i - 1)), s === "," && i === 0 ? (r.push(t.trim()), t = "") : t += s;
+  }
+  t.trim() && r.push(t.trim());
+  let o = [];
+  for (let n of r) {
+    if (/\binset\b/i.test(n)) continue;
+    let s = n.match(/-?\d+(?:\.\d+)?px/gi) || [], [l = "0px", a = "0px", m = "0px"] = s, u = n.replace(/-?\d+(?:\.\d+)?px/gi, "").replace(/\binset\b/ig, "").trim().replace(/\s{2,}/g, " "), d = !!u && u !== ",";
+    o.push(`drop-shadow(${l} ${a} ${m}${d ? ` ${u}` : ""})`);
+  }
+  return o.join(" ");
+}
+function y(e) {
+  let r = F(e), t = null, i = null, o = null, n = [];
+  for (let l of r) {
+    let a = l.indexOf(":");
+    if (a < 0) continue;
+    let m = l.slice(0, a).trim().toLowerCase(), u = l.slice(a + 1).trim();
+    m === "box-shadow" ? o = u : m === "filter" ? t = u : m === "-webkit-filter" ? i = u : n.push([m, u]);
+  }
+  if (o) {
+    let l = k(o);
+    l && (t = t ? `${t} ${l}` : l, i = i ? `${i} ${l}` : l);
+  }
+  let s = [...n];
+  return t && s.push(["filter", t]), i && s.push(["-webkit-filter", i]), s.map(([l, a]) => `${l}:${a}`).join(";");
+}
+function I(e) {
+  return e.replace(/([^{}]+)\{([^}]*)\}/g, (r, t, i) => `${t}{${y(i)}}`);
+}
+function N(e) {
+  return e = e.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (r, t) => r.replace(t, I(t))), e = e.replace(/style=(['"])([\s\S]*?)\1/gi, (r, t, i) => `style=${t}${y(i)}${t}`), e;
+}
+function S(e) {
+  if (!b() || !M(e)) return e;
+  try {
+    let r = C(e), t = N(r);
+    return v(t);
+  } catch {
+    return e;
+  }
+}
+async function R(e, r) {
+  let { width: t, height: i, scale: o = 1, dpr: n = 1, meta: s = {}, backgroundColor: l } = r;
+  e = S(e);
+  let a = new Image();
+  a.loading = "eager", a.decoding = "sync", a.crossOrigin = "anonymous", a.src = e, await a.decode();
+  let m = a.naturalWidth, u = a.naturalHeight, d = Number.isFinite(s.w0) ? s.w0 : m, x = Number.isFinite(s.h0) ? s.h0 : u, c, f, $ = Number.isFinite(t), w = Number.isFinite(i);
+  if ($ && w) c = Math.max(1, t), f = Math.max(1, i);
+  else if ($) {
+    let g = t / Math.max(1, d);
+    c = t, f = x * g;
+  } else if (w) {
+    let g = i / Math.max(1, x);
+    f = i, c = d * g;
+  } else c = m, f = u;
+  c = c * o, f = f * o;
+  let h = document.createElement("canvas");
+  h.width = c * n, h.height = f * n, h.style.width = `${c}px`, h.style.height = `${f}px`;
+  let p = h.getContext("2d");
+  return n !== 1 && p.scale(n, n), l && (p.save(), p.fillStyle = l, p.fillRect(0, 0, c, f), p.restore()), p.drawImage(a, 0, 0, c, f), h;
+}
+export {
+  R as W
+};

package/dist/chunk-Q2Z2CG2I-DONVpEh7.js

@@ -0,0 +1,8 @@
+import { W as a } from "./chunk-MW6X4KTL-BVRq9FtF.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;
+}
+export {
+  o as d
+};

package/dist/chunk-Y7FY32AO-S9q2Scd_.js

@@ -0,0 +1,13 @@
+import { W as m } from "./chunk-MW6X4KTL-BVRq9FtF.js";
+async function a(n, e) {
+  let o = e.type;
+  if (o === "svg") {
+    let t = decodeURIComponent(n.split(",")[1]);
+    return new Blob([t], { type: "image/svg+xml" });
+  }
+  let i = await m(n, e);
+  return new Promise((t) => i.toBlob((l) => t(l), `image/${o}`, e.quality));
+}
+export {
+  a as m
+};

package/dist/download-m8kcgXF4.js

@@ -0,0 +1,15 @@
+import { m as f } from "./chunk-Y7FY32AO-S9q2Scd_.js";
+import { W as t } from "./chunk-MW6X4KTL-BVRq9FtF.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") {
+    let d = await f(n, { ...o, type: "svg" }), l = URL.createObjectURL(d), m = document.createElement("a");
+    m.href = l, m.download = i, m.click(), URL.revokeObjectURL(l);
+    return;
+  }
+  let p = await t(n, o), r = document.createElement("a");
+  r.href = p.toDataURL(`image/${a}`, e == null ? void 0 : e.quality), r.download = i, r.click();
+}
+export {
+  w as download
+};