template-designer 0.10.7 → 0.10.8

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "template-designer",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "模板拖拽设计器组件库",
   "main": "dist/template-designer.umd.js",
   "module": "dist/template-designer.esm.js",