SuperAPI AI 工具集

syncfusion-javascript-barcode

编程与开发

查看项目

更新于 10-16 01:57

技能介绍

Syncfusion JavaScript Barcode Generator 用于在 Web 应用中生成、定制并导出条码,适合需要可扫描编码的解决方案,例如销售点系统、库存管理、票务系统、医疗应用等。

主要能力

库提供三种条码类型:

BarcodeGenerator:创建一维线性条码(Code39、Code128、Codabar、Code11、Code32、Code93、Code128A/B/C)。

QRCodeGenerator:创建二维 QR 码,支持可选 Logo 与纠错。

DataMatrixGenerator:创建二维 Data Matrix 码,面向工业与零售应用。

三者使用相同的核心 API:初始化配置、追加到 DOM、自定义与导出。

使用方式

安装并通过 npm 引入 @syncfusion/ej2-barcode-generator,按需从包中导入 BarcodeGenerator、QRCodeGenerator 或 DataMatrixGenerator,传入配置对象后调用 appendTo 挂载到指定 DOM 元素。官方 Quick Start 示例:

import { BarcodeGenerator } from '@syncfusion/ej2-barcode-generator';

const barcode = new BarcodeGenerator({ width: '200px', height: '150px', type: 'Code128', value: 'SYNCFUSION', mode: 'SVG', displayText: { visibility: true } });

barcode.appendTo('#barcode');

QR 码与 Data Matrix 的导入与初始化方式类似,分别导入 QRCodeGenerator、DataMatrixGenerator 并调用 appendTo。

关键配置项

type(字符串,默认 'Codabar'):条码类型;value(字符串,默认 ''):编码数据;width(默认 '200px'):宽度,可用 px 或 %;height(默认 '150px'):高度;mode(默认 'SVG'):渲染模式,可选 SVG 或 Canvas;foreColor(默认 '#000000'):条码颜色;backgroundColor(默认 '#ffffff'):背景色;displayText(对象,默认 {}):显示文本配置,含 visibility、text、font 等;logo(仅 QR):Logo 配置,含 imageSource、width、height;errorCorrectionLevel(仅 QR,默认 0):纠错级别,0=Low、1=Medium、2=Quarter、3=High。

定制与导出

支持设置条码前景色与背景色、宽高与响应式尺寸(如 width:'100%')、显示文本的字体/可见性/对齐,以及 SVG 与 Canvas 渲染模式的选择。导出方面支持导出为图片格式(JPG、PNG)、导出 Base64 字符串(便于服务端提交)以及打印与浏览器下载。示例:barcode.exportImage('mybarcode', 'PNG');const base64 = await barcode.exportAsBase64Image('JPG')。

校验与事件

支持在生成前进行输入校验、处理 ValidateEvent、预防错误与边界情况、事件驱动的条码更新以及实时校验。

典型使用场景

销售点:用 Code128 即时生成商品条码;库存:用 Data Matrix 生成货运标签用于追踪;营销:生成指向促销 URL 的 QR 码;医疗:用 Code39 编码患者数据(兼容遗留系统);电商:将订单号生成为 Code128 条码用于打包;票务:生成带 Logo 品牌的 QR 码用于活动门票;文档管理:在 PDF 中嵌入 Data Matrix 用于分拣归档。

选型建议

通用字母数字条码优先使用 Code128(最灵活);需要 URL、联系信息或品牌 Logo 时使用 QRCodeGenerator;工业标签与狭小空间编码使用 DataMatrixGenerator;遗留系统或 ASCII 足够时使用 Code39。

限制

资料未提供该库的收费、价格与授权信息,暂未提供;也未提供各生成器在超出字符集限制时的具体行为、浏览器兼容范围等细节,暂未提供。