vg-print 1.0.362 → 1.0.364

package/README.md

@@ -20,6 +20,8 @@ npm搜索vg-print.
 - 通过属性配置 `hiwebSocket` 的 `host`、`token` 与自动连接
 - 暴露实例方法：预览、打印、导出、连接控制等，外部可直接调用
 - 集成并导出 `hiprint`，可进行模板对象级的高级定制
+- 内置 `@sv-print/plugin-api-pdf3` 与 `@sv-print/plugin-api-image` 插件，提供更强大的导出功能
+
 
 ## 安装
 
@@ -387,7 +389,7 @@ hiprint.setConfig({ showAdsorbLine: true, showPosition: true, showSizeBox: true
 hiprint.register({ authKey: '', plugins: [] })
 // 初始化元素提供器 （默认元素提供器）
 hiprint.init({ 
-  providers: [new defaultElementTypeProvider()],
+  // providers: [new defaultElementTypeProvider()],
   host: 'http://localhost:17521',
   token: '',
   lang: 'en'
@@ -411,30 +413,67 @@ hiprint.init({
 
 
 // 导出 PDF（内置示例参数）
-// 模式1: 小模版需要在一页中排列的话，增加增加页面宽高参数（想把多订单放在一页中排列）----小模板拼到大纸张（例如 A4）
-  tpl.toPdf([{ name: '示例1' },{ name: '示例2' },{ name: '示例3' }], '打印预览pdf', { 
+// 方式 1: 原生导出 (toPdf)
+// 模式1: 小模版需要在一页中排列的话...数据是数组格式
+  tpl.toPdf([...], '打印预览pdf', { 
+      isDownload: true, // 不自动下载
+      type: "blob", // 默认 blob  支持: blob、bloburl、pdfobjectnewwindow、dataurl  --> jspdf.output(type)
+      onProgress: (cur, total) => {
+        const percent = Math.floor((cur / total) * 100);
+        console.log("toPdf 进度", percent);
+        // 导出进度100%的时候关闭等待
+        if (cur === total) {
+          // 导出完成
+        }
+      },
+
+   })
+
+// 方式 2: 插件导出 (toPdf2) - 推荐
+// 支持更多选项，如 isDownload, type (blob/url/...)
+  tpl.toPdf2(this.printDataVar, '文件名', {
     paperWidth: 210, 
     paperHeight: 297, 
     scale: 2, 
-    perPage: 6, // 每页模板数
-    leftOffset:-1, // 对齐偏移
-    topOffset:-1, // 对齐偏移
-      onProgress: (cur, total) => { 
-      console.log('toPdf 进度', Math.floor((cur/total)*100))
-      }
-    })
-// 模式2:普通模板，导出预览全部页：
-  tpl.toPdf(this.printDataVar, '打印预览pdf',{
-  onProgress: (cur, total) => { 
+    perPage: 6, 
+    leftOffset:-1, 
+    topOffset:-1, 
+    onProgress: (cur: number, total: number) => { 
       console.log('toPdf 进度', Math.floor((cur/total)*100))
+      if (cur === total) {
+        // 导出完成
       }
-  });
+    }
+  })
 
 // 导出图片（内置示例参数） 
-// 导出为多张图片，每张合成 6 页，自动下载 JPEG     
-  tpl.toImage({ name: '示例' }, { isDownload: true, name: '图片名称', limit: 1, type: 'image/jpeg', pixelRatio: 2, quality: 0.8, toType: 'url', onProgress: (cur, total) => console.log('toImage 进度', Math.floor((cur/total)*100)) })
-  //按 A4 纸张排版导出（把小模板排到 A4）：
-  tpl.toImage({ name: '示例' }, { paperWidth: 210, paperHeight: 297, limit: 6, isDownload: true, name: 'A4排版', type: 'image/jpeg', pixelRatio: 2 })
+// 方式 1: 原生导出 (toImage)
+  tpl.toImage({ name: '示例' }, { 
+    isDownload: true, // 不自动下载
+    name: "图片名称",
+    limit: 1, // 默认 10  多少页为一个 图片文件, 太多 图片文件就很长
+    type: "image/jpeg", // 默认 image/jpeg   --> canvas.toDataURL(type, quality)
+    pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
+    quality: 0.8, // 默认 0.92  图片质量 0-1
+    toType: "url", // 默认 url   支持: url、blob
+    onProgress: (cur, total) => {
+      const percent = Math.floor((cur / total) * 100);
+      console.log("toImage 进度", percent);
+      if (cur === total) {
+        // 导出完成
+      }
+    },
+   })
+
+// 方式 2: 插件导出 (toImage2) - 推荐
+// 支持跨域图片(useCORS), 更多格式控制
+  tpl.toImage2(this.printDataVar, {
+    isDownload: true,
+    name: '图片名称',
+    type: 'image/jpeg',
+    useCORS: true, // 开启跨域支持
+    onProgress: (cur, total) => { ... }
+  })
 
 ```
 
@@ -530,7 +569,9 @@ import {
   getHtml,
   printBrowser,
   exportPdf,
+  exportPdf2, // 插件导出
   exportImage,
+  exportImage2, // 插件导出
   getPrinterList,
   setHiwebSocket,
   connect,
@@ -559,27 +600,57 @@ const preview = async () => {
 // 3) 浏览器打印（不需要客户端）
 printBrowser(tpl, printData)
 
-// 4) 导出 PDF（示例参数）
+// 4) 导出 PDF
+// 插件方法 (推荐)
 exportPdf(tpl, printData, '打印预览pdf', {
-  paperWidth: 210,
-  paperHeight: 297,
-  scale: 2,
-  perPage: 6,
-  leftOffset: -1,
-  topOffset: -1,
-  onProgress: (cur, total) => console.log('toPdf 进度', Math.floor((cur/total)*100))
+  isDownload: true, // 不自动下载
+  type: "blob", // 默认 blob  支持: blob、bloburl、pdfobjectnewwindow、dataurl  --> jspdf.output(type)
+  onProgress: (cur, total) => {
+    const percent = Math.floor((cur / total) * 100);
+    console.log("toPdf 进度", percent);
+  },
+})
+// 原生方法
+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))
+    }
 })
 
-// 5) 导出图片（示例参数）
+// 5) 导出图片
+// 插件方法 (推荐)
 await exportImage(tpl, printData, {
-  isDownload: true,
-  name: 'A4排版',
-  limit: 1, // 导出多张时设置每张合成的页数；不传或设为 0 合成整图
-  type: 'image/jpeg',
-  pixelRatio: 2,
-  quality: 0.8,
-  toType: 'url',
-  onProgress: (cur, total) => console.log('toImage 进度', Math.floor((cur/total)*100))
+  isDownload: true, // 不自动下载
+  name: "图片名称",
+  limit: 1, // 默认 10  多少页为一个 图片文件, 太多 图片文件就很长
+  type: "image/jpeg", // 默认 image/jpeg   --> canvas.toDataURL(type, quality)
+  pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
+  quality: 0.8, // 默认 0.92  图片质量 0-1
+  toType: "url", // 默认 url   支持: url、blob
+  onProgress: (cur, total) => {
+    const percent = Math.floor((cur / total) * 100);
+    console.log("toImage 进度", percent);
+  },
+})
+// 原生方法
+await exportImage2(tpl, printData, {
+   isDownload: true, 
+  name: '图片名称', 
+  limit: 1, 
+  type: 'image/jpeg', 
+  pixelRatio: 2, 
+  quality: 0.8, 
+  toType: 'url', 
+  useCORS: true, // 开启跨域支持
+  onProgress: (cur: number, total: number) => {
+    console.log('toImage 进度', Math.floor((cur/total)*100))
+  }
 })
 
 // 6) 客户端直连打印（需要本地客户端）

package/dist/chunk-3VYIPD3A-CWjvYN8r.js

@@ -0,0 +1,87 @@
+import { l as b } from "./index-CwLU3yfY.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-ANSXOGKI-DhrOSjXG.js

@@ -0,0 +1,8 @@
+import { W as a } from "./chunk-3VYIPD3A-CWjvYN8r.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-T4JIPPZO-CMzWM7_N.js

@@ -0,0 +1,13 @@
+import { W as m } from "./chunk-3VYIPD3A-CWjvYN8r.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-CcOMO3tG.js

@@ -0,0 +1,15 @@
+import { m as f } from "./chunk-T4JIPPZO-CMzWM7_N.js";
+import { W as t } from "./chunk-3VYIPD3A-CWjvYN8r.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
+};