template-designer 0.10.7 → 0.10.9

package/README.md

@@ -289,13 +289,20 @@ const config = {
 
 ### 2、当前模板中控件的旋转中心为控件的中心，每个组件的数据都包含x1，y1，为左上角旋转之后的实时坐标，旋转角度为顺时针
 
-## 渲染导出工具：renderTemplateToPdfBase64
+### 字段替换规则
 
-提供一个独立工具，将“模板数据 + 打印数据”渲染为 PDF 或 PNG，并返回 base64 或 dataURL
+- 适用组件：text、barcode、qrcode。
+- FieldName 支持 string 或数组：
+  - string：从 `printData[key]` 取值
+  - array：从 `printData` 逐个取值，使用组件 `FieldConnector` 连接（默认空格）
+- 覆盖策略：导出前始终用打印数据覆盖组件测试值：
+  - text → 覆盖 `Text`
+  - barcode → 覆盖 `BarcodeValue`
+  - qrcode → 覆盖 `QRCodeValue`
 
-## renderTemplateToHtml
+## 渲染导出工具：renderTemplateToPdfBase64
 
-提供一个独立工具，将“模板数据 + 打印数据”渲染为 html
+提供一个独立工具，将“模板数据 + 打印数据”渲染为 PDF 或 PNG，并返回 base64 或 dataURL
 
 ### 导入
 
@@ -324,17 +331,6 @@ async function renderTemplateToPdfBase64(
 ): Promise<string>
 ```
 
-### 字段替换规则
-
-- 适用组件：text、barcode、qrcode。
-- FieldName 支持 string 或数组：
-  - string：从 `printData[key]` 取值
-  - array：从 `printData` 逐个取值，使用组件 `FieldConnector` 连接（默认空格）
-- 覆盖策略：导出前始终用打印数据覆盖组件测试值：
-  - text → 覆盖 `Text`（并拼接 `Title`）
-  - barcode → 覆盖 `BarcodeValue`
-  - qrcode → 覆盖 `QRCodeValue`
-
 ### 基础用法（导出 PDF，返回 base64）
 
 ```js
@@ -351,29 +347,161 @@ const pdfBase64 = await renderTemplateToPdfBase64(template, printData, {
 })
 ```
 
-### 在浏览器中预览与下载 PDF
+### 体积优化建议
+
+- 不需要透明背景时，`transparent=false` + `quality≈0.8` + `scale≈2`，可显著减小体积仍保持清晰。
+- 需要极致清晰时提高 `scale`；若体积过大，适当降低 `quality`。
+
+## 条形码和二维码生成工具
+
+提供独立的条形码和二维码生成函数，可在组件外部使用。
+
+### generateBarcode - 条形码生成
+
+#### 导入
 
 ```js
-// 预览（推荐使用 blob URL，兼容性更好）
-const dataUrl = await renderTemplateToPdfBase64(template, printData, { returnType: 'baseUrl' })
-const base64 = dataUrl.split(',')[1]
-const blob = new Blob([Uint8Array.from(atob(base64), c => c.charCodeAt(0))], { type: 'application/pdf' })
-const blobUrl = URL.createObjectURL(blob)
-window.open(blobUrl)
-
-// 下载
-const a = document.createElement('a')
-a.href = blobUrl
-a.download = 'template.pdf'
-document.body.appendChild(a)
-a.click()
-document.body.removeChild(a)
+import { generateBarcode } from 'template-designer'
 ```
 
-### 体积优化建议
+#### 函数签名
 
-- 不需要透明背景时，`transparent=false` + `quality≈0.8` + `scale≈2`，可显著减小体积仍保持清晰。
-- 需要极致清晰时提高 `scale`；若体积过大，适当降低 `quality`。
+```ts
+async function generateBarcode(
+  text: string,                    // 要编码的文本内容
+  options?: {
+    CodeType?: string              // 条形码格式，可选'CODE128'|'CODE39'|'EAN13'|'EAN8'|'UPC'|'ITF14'|'MSI'|'pharmacode'|'codabar'，默认'CODE128'
+    width?: number                 // 条形码宽度（毫米），默认50
+    height?: number                // 条形码高度（毫米），默认15
+    LineColor?: string             // 条形码颜色，默认'#000000'
+    background?: string            // 背景色，默认'#ffffff'
+    displayValue?: boolean         // 是否显示文本，默认false
+    textAlign?: string             // 文本对齐，可选'left'|'center'|'right'，默认'center'
+    textPosition?: string          // 文本位置，可选'bottom'|'top'，默认'bottom'
+    textMargin?: number            // 文本边距（毫米），默认2
+    font?: string                  // 字体，默认'monospace'
+    fontSize?: number              // 字体大小（毫米），默认5
+    outputFormat?: string          // 输出格式，可选'png'|'jpeg'|'svg'，默认'png'
+    quality?: number               // 图片质量（0-1），仅对jpeg有效，默认0.95
+    returnDataUrl?: boolean        // 是否返回完整dataUrl，默认true
+    dpi?: number                   // DPI值，默认300
+  }
+): Promise<string>                 // 返回base64格式的图片数据或dataUrl
+```
+
+#### 使用示例
+
+```js
+// 基础用法
+const barcodeDataUrl = await generateBarcode('1234567890', {
+  CodeType: 'CODE128',
+  width: 50,
+  height: 15,
+  displayValue: true
+})
+
+// 使用返回的dataUrl
+const img = document.createElement('img')
+img.src = barcodeDataUrl
+document.body.appendChild(img)
+
+// 自定义样式
+const customBarcode = await generateBarcode('ABC123', {
+  CodeType: 'CODE39',
+  width: 60,
+  height: 20,
+  LineColor: '#FF0000',
+  background: '#FFFF00',
+  displayValue: true,
+  textAlign: 'center',
+  fontSize: 6,
+  outputFormat: 'png',
+  dpi: 300
+})
+```
+
+#### 支持的条形码格式
+
+- `CODE128` - 支持ASCII字符，最大80个字符（默认）
+- `CODE39` - 支持大写字母、数字、特殊字符，最大43个字符
+- `EAN13` - 13位数字，商品条码
+- `EAN8` - 8位数字，商品条码
+- `UPC` - 12位数字，商品条码
+- `ITF14` - 14位数字，物流条码
+- `MSI` - 数字，最大20位
+- `pharmacode` - 数字，最大6位，药品条码
+- `codabar` - 支持数字、字母、特殊字符，最大20个字符
+
+### generateQRCode - 二维码生成
+
+#### 导入
+
+```js
+import { generateQRCode } from 'template-designer'
+```
+
+#### 函数签名
+
+```ts
+async function generateQRCode(
+  text: string,                    // 要编码的文本内容
+  options?: {
+    width?: number                 // 二维码宽度（毫米），默认50
+    height?: number                // 二维码高度（毫米），默认50
+    QRCodeForeground?: string      // 前景色（二维码颜色），默认'#000000'
+    QRCodeBackground?: string      // 背景色，默认'#ffffff'
+    QRCodeErrorLevel?: string      // 错误纠正级别，可选'L'|'M'|'Q'|'H'，默认'M'
+    margin?: number                // 边距（毫米），默认0
+    format?: string                // 输出格式，可选'png'|'jpeg'|'svg'，默认'png'
+    quality?: number               // 图片质量（0-1），仅对jpeg有效，默认0.9
+    returnDataUrl?: boolean        // 是否返回完整dataUrl，默认true
+    dpi?: number                   // DPI值，默认96
+  }
+): Promise<string>                 // 返回base64格式的图片数据或dataUrl
+```
+
+#### 使用示例
+
+```js
+// 基础用法
+const qrcodeDataUrl = await generateQRCode('https://example.com', {
+  width: 50,
+  height: 50,
+  QRCodeErrorLevel: 'M'
+})
+
+// 使用返回的dataUrl
+const img = document.createElement('img')
+img.src = qrcodeDataUrl
+document.body.appendChild(img)
+
+// 自定义样式
+const customQRCode = await generateQRCode('Hello World', {
+  width: 60,
+  height: 60,
+  QRCodeForeground: '#0000FF',
+  QRCodeBackground: '#FFFFFF',
+  QRCodeErrorLevel: 'H',  // 高错误纠正级别
+  margin: 2,
+  format: 'png',
+  dpi: 300
+})
+
+// 生成SVG格式
+const svgQRCode = await generateQRCode('SVG格式二维码', {
+  width: 50,
+  height: 50,
+  format: 'svg',
+  returnDataUrl: true
+})
+```
+
+#### 错误纠正级别说明
+
+- `L` - 低（约7%的错误可被纠正）
+- `M` - 中（约15%的错误可被纠正，默认）
+- `Q` - 四分之一（约25%的错误可被纠正）
+- `H` - 高（约30%的错误可被纠正）
 
 ## 开发
 

package/dist/{index-10abd1e6.mjs → index-5ac52477.mjs}

@@ -4997,7 +4997,10 @@ function ZE(e, A) {
 }
 const PE = /* @__PURE__ */ Mt(DE, [["render", ZE]]), wi = (e) => e * 3.7795275591, Oi = (e) => e / 3.7795275591;
 function Q0(e) {
-  return !e || e <= 0 ? 1 : Oi(e) * 1.5;
+  if (!e || e <= 0)
+    return 1;
+  const A = Oi(e);
+  return (window.$templateType || "lodop") === "rfid" ? A * 1.5 : A;
 }
 var vi = {}, JE = function() {
   return typeof Promise == "function" && Promise.prototype && Promise.prototype.then;
@@ -7362,9 +7365,9 @@ const BQ = /* @__PURE__ */ Mt(dQ, [["render", gQ]]), qg = [
 ], $g = qg.flatMap((e) => e.components);
 async function mQ(e) {
   try {
-    return (await Fm(/* @__PURE__ */ Object.assign({ "./props/lodop.js": () => import("./lodop-ff40cbf8.mjs"), "./props/rfid.js": () => import("./rfid-01e0a6cc.mjs") }), `./props/${e}.js`)).default;
+    return window.$templateType = e, (await Fm(/* @__PURE__ */ Object.assign({ "./props/lodop.js": () => import("./lodop-033d60c2.mjs"), "./props/rfid.js": () => import("./rfid-575a28b2.mjs") }), `./props/${e}.js`)).default;
   } catch {
-    return console.warn(`配置文件 ./props/${e}.js 不存在，使用默认配置`), (await import("./lodop-ff40cbf8.mjs")).default;
+    return console.warn(`配置文件 ./props/${e}.js 不存在，使用默认配置`), (await import("./lodop-033d60c2.mjs")).default;
   }
 }
 function wQ(e = {}, A = {}) {
@@ -23185,7 +23188,7 @@ function(e) {
  */
 function(e) {
   function A() {
-    return (de.canvg ? Promise.resolve(de.canvg) : import("./index.es-2ff99c2c.mjs")).catch(function(t) {
+    return (de.canvg ? Promise.resolve(de.canvg) : import("./index.es-fb4d35c4.mjs")).catch(function(t) {
       return Promise.reject(new Error("Could not load canvg: " + t));
     }).then(function(t) {
       return t.default ? t.default : t;

package/dist/{index.es-2ff99c2c.mjs → index.es-fb4d35c4.mjs}

@@ -1,4 +1,4 @@
-import { c as Qe, _ as Ha, g as Lo } from "./index-10abd1e6.mjs";
+import { c as Qe, _ as Ha, g as Lo } from "./index-5ac52477.mjs";
 import "vue";
 var ht = function(a) {
   return a && a.Math === Math && a;

package/dist/{lodop-ff40cbf8.mjs → lodop-033d60c2.mjs}

@@ -1,4 +1,4 @@
-import { R as e } from "./index-10abd1e6.mjs";
+import { R as e } from "./index-5ac52477.mjs";
 import "vue";
 const t = {
   text: {

package/dist/{rfid-01e0a6cc.mjs → rfid-575a28b2.mjs}

@@ -1,4 +1,4 @@
-import { R as e } from "./index-10abd1e6.mjs";
+import { R as e } from "./index-5ac52477.mjs";
 import "vue";
 const t = {
   text: {

package/dist/template-designer.es.js

@@ -1,4 +1,4 @@
-import { T as t, f as s, i as d, h as o, d as n, b as l, e as g, a as p, r as m } from "./index-10abd1e6.mjs";
+import { T as t, f as s, i as d, h as o, d as n, b as l, e as g, a as p, r as m } from "./index-5ac52477.mjs";
 import "vue";
 export {
   t as default,