解读：Syncfusion的新JavaScript条形码生成器控件

JavaScript条形码生成器控件主要特点：

• 各种条形码符 ，包括Code 39、Code 39扩展、Code 11、Codabar、Code 32、Code 93、Code 93扩展、Code 128、UPC-A、UPC-E、EAN-8、EAN-13、数据矩阵和QR码。

• 显示带有或不带有人类可读文本的条形码的选项。

• 用于自定义文本位置及其对齐的选项。

• 用于自定义条形码高度、宽度、背景颜色和前景色的选项。

• 用于将条形码呈现为SVG或画布图形的选项。

如何使用Syncfusion的新JavaScript条形码生成器控件生成一维或线性条形码、Data Matrix条形码和QR码呢继续往下看吧~

生成1D或线性条形码

克隆项目并使用以下命令安装必要的包：

git clone https://github.com/syncfusion/ej2-quickstart.git quickstartcd quickstartnpm install

必须在system.config.js 配置文件中映射从属软件包。

System.config({    paths: {        'syncfusion:': './node_modules/@syncfusion/',    },    map: {        app: 'app',          //Syncfusion packages mapping        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",        "@syncfusion/ej2-barcodegenerator": "syncfusion:ej2-barcodegenerator/dist/ej2- barcodegenerator.umd.min.js",    },    packages: {        'app': { main: 'app', defaultExtension: 'js' }    }});

将条形码的HTML div元素添加到index.html。[SRC / index.html中]

<!-- Add the HTML <div> element  --><div id="barcode"> </div>

然后通过在app.ts [src/app/app.ts]中指定条形码类型、值等来实例化条形码生成器。以下代码示例将生成Code 128条形码：

import { BarcodeGenerator } from '@syncfusion/ej2-barcode-generator'; /** * Initialize the barcode */  let barcode: BarcodeGenerator = new BarcodeGenerator({    width: '200px',    height: '150px',    // Define the type of the barcode    type: 'Code128',    // Define the value for the barcode to generate    value: 'SYNCFUSION',});barcode.appendTo('#barcode');

运行以下命令以启动该应用程序：

生成的Code 128条形码将类似于以下条形码：

生成QR码

以下代码示例说明了如何创建QR代码：

/*[src/app/app.ts] */ import { QRCodeGenerator } from '@syncfusion/ej2-barcode-generator'; /** * Initialize the QRCode Generator */let barcode: QRCodeGenerator = new QRCodeGenerator({    width: '200px',    height: '150px',    value: 'SYNCFUSION',    });barcode.appendTo('#barcode');

生成的QR码将如下图所示：

生成数据矩阵

您可以使用以下代码示例创建Data Matrix条形码：

/*[src/app/app.ts] */ import { DataMatrixGenerator} from '@syncfusion/ej2-barcode-generator'; /** * Initialize the Data Matrix Generator   */ let barcode: DataMatrixGenerator = new DataMatrixGenerator({    height: 150,    width: 200,    value: 'SYNCFUSION'});barcode.appendTo('#barcode');

以下是生成的Data Matrix条形码的屏幕截图：

此条形码生成器控件旨在实现高度可定制。

通过以上信息，你有没有对新控件的关键功能以及如何将其集成到Web应用程序中有一个清晰的认识呢迎留言告诉我们哦~

另外，要使用这款纯JavaScript条形码生成器，可以先下载【免费试用版】体验一下！

想要了解Essential Studio for JavaScript更多资源的朋友，请点这里。

想要获取Essential Studio for JavaScript正版授权的朋友，请点这里。

标签：