Syncfusion纯JavaScript条形码生成器控件
<李> 各种条形码符号,包括39代码,代码39扩展,代码11日Codabar, 32代码,代码93,代码93扩展,代码128,UPC-A, UPC-E, EAN-8, EAN-13,数据矩阵和QR码。
<李> 显示带有或不带有人类可读文本的条形码的选项。
<李> 用于自定义文本位置及其对齐的选项。
<李> 用于自定义条形码高度,宽度,背景颜色和前景色的选项。
<李> 用于将条形码呈现为SVG或画布图形的选项。
如何使用Syncfusion的新JavaScript条形码生成器控件生成一维或线性条形码,数据矩阵条形码和QR码呢?请继续往下看吧~
克隆项目并使用以下命令安装必要的包:
git克隆https://github.com/syncfusion/ej2-quickstart.git快速入门
cd快速入门
npm安装 必须在system.config。js配置文件中映射从属软件包。
System.config ({
道路:{
“syncfusion:”:“。/node_modules/@syncfusion/?
}，
地图:{
应用:“应用程序”,//Syncfusion包映射
:“@syncfusion/ej2-base syncfusion: ej2-base/dist/ej2-base.umd.min.js”,
“@syncfusion/ej2-barcodegenerator”:“syncfusion: ej2-barcodegenerator/dist/ej2 - barcodegenerator.umd.min.js”,
}，
包:{
“应用程序”:{主要:“应用程序”,defaultExtension:“js”}
}
}); 将条形码的HTML div元素添加到索引。html。[SRC/索引。html中)
& lt; !——添加HTML & lt; div>元素——比;
& lt; div id=疤跣温搿北?& lt;/div> 然后通过在应用。ts (src/应用程序/应用程序。ts)中指定条形码类型,值等来实例化条形码生成器。以下代码示例将生成代码128条形码:
进口从‘@syncfusion/ej2-barcode-generator’{BarcodeGenerator};/* *
*初始化条码
*/让条形码:BarcodeGenerator=new BarcodeGenerator ({
宽度:200 px,
身高:150 px,//定义条形码的类型
类型:“Code128”,//定义条形码生成的值
价值:“SYNCFUSION”,
});
barcode.appendTo(#条形码); 运行以下命令以启动该应用程序:
npm开始生成的代码128条形码将类似于以下条形码: 
以下代码示例说明了如何创建QR代码:
/* [src/应用程序/应用程序。ts) */从“@syncfusion/ej2-barcode-generator”进口{QRCodeGenerator};/* *
*初始化QRCode生成器
*/让条形码:QRCodeGenerator=new QRCodeGenerator ({
宽度:200 px,
身高:150 px,
价值:“SYNCFUSION”,
});
barcode.appendTo(#条形码); 生成的QR码将如下图所示:
您可以使用以下代码示例创建数据矩阵条形码:
/* [src/应用程序/应用程序。ts) */从“@syncfusion/ej2-barcode-generator”进口{DataMatrixGenerator};/* *
*初始化数据矩阵生成器
*/让条形码:DataMatrixGenerator=new DataMatrixGenerator ({
身高:150,
宽度:200年,
价值:“SYNCFUSION”
});
barcode.appendTo(#条形码); 以下是生成的数据矩阵条形码的屏幕截图:
此条形码生成器控件旨在实现高度可定制。
