Syncfusion new JavaScript Barcode Generator Control

Syncfusion 's Web (Essential JS 2) platform includes a new, powerful pure JavaScript Barcode Generator controls . This barcode generator control lightweight, easy to use, easy to integrate. It can use JavaScript to create and display industry-standard one-dimensional bar codes, Data Matrix barcodes and QR codes generated barcode needle is optimized for screen printing and scanning. The control can interoperate with other third-party Web frameworks (e.g. Angular, React and Vue.js).

The main features of JavaScript Barcode Generator control:

Various bar code symbol, including Code 39, Code 39 extended, Code 11, Codabar, Code 32, Code 93, Code 93 extended, Code 128, UPC-A, UPC-E, EAN-8, EAN-13, data matrix, and QR codes.
Displaying a barcode options with or without human readable text.
Location and custom text alignment options for self.
Options for custom barcode height, width, background and foreground color.
For the bar code presented as canvas or SVG graphics options.

How to use Syncfusion new JavaScript control barcode generator generates a one-dimensional or linear bar codes, Data Matrix barcodes and QR codes it? Please continue to read on -

Generating a 1D linear barcode or

Clone project and use the following command to install the necessary packages:

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Packages must be mapped in system.config.js slave configuration file.

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' }
    }
});

Add the HTML div element barcode to index.html. [SRC / index.html in]

<!-- 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');

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

npm start

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

Code-128-barcode (1).png

生成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条形码的屏幕截图：

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

Syncfusion new JavaScript Barcode Generator Control

Guess you like