Syncfusion's Web (Essential JS 2) platform contains a new and powerful pure JavaScript barcode generator control. This bar code generator is light in weight, easy to use and easy to integrate. It can use JavaScript to create and display industry standard one-dimensional bar code, Data Matrix bar code and QR code. The generated bar code needle is optimized and can be used for printing and screen scanning. The control can interoperate with other third-party Web frameworks, such as Angular, React and Vue.js.

The main features of JavaScript Barcode Generator Controls are as follows:

• Various bar code symbols, including Code 39, Code 39 extension, Code 11, Codabar, Code 32, Code 93, Code 93 extension, Code 128, UPC-A, UPC-E, EAN-8, EAN-13, data matrix and QR code.

• Displays options for barcodes with or without human-readable text.

• Options for customizing text location and alignment.

• Options for customizing bar code height, width, background color and foreground color.

• Options for rendering barcodes as SVG or canvas graphics.

How to use Syncfusion's new JavaScript barcode generator control to generate one-dimensional or linear barcodes, Data Matrix barcodes and QR codes? Please keep looking down.~

Generating 1D or linear barcode

Clone the project and install the necessary packages using the following commands:

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

Subordinate packages must be mapped in the system.config.js 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 of the barcode to index. html. [SRC/index.html]

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

Then the bar code generator is instantiated by specifying the type and value of bar code in app.ts [src/app/app.ts]. The following code example generates Code 128 barcode:

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

Run the following command to start the application:

The generated Code 128 barcode will be similar to the following barcode:

Generating QR Code

The following code example illustrates how to create QR code:

/*[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');

The generated QR code will be shown in the following figure:

Generating Data Matrix

You can use the following code examples to create Data Matrix barcodes:

/*[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');

The following is a screen shot of the generated Data Matrix barcode:

This bar code generator control is designed to be highly customizable.