Introducing Syncfusion’s New JavaScript Barcode Generator Control

Syncfusion is happy to share that a new, powerful, pure-JavaScript barcode generator control has been included with our web (Essential JS 2) platform. This barcode generator control is lightweight, easy to use, and easy to integrate. It can be used to create and display industry-standard 1D barcodes, Data Matrix barcodes, and QR codes using JavaScript. The generated barcodes are optimized for printing and on-screen scanning. The control is interoperable with other third-party web frameworks such as Angular, React, and Vue.js.

In this blog, we will guide you through the key features and how to get started with our JavaScript Barcode Generator control.

Key features:

• A wide range of barcode symbologies, 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 code.
• Options to display barcodes with or without human-readable text.
• Options to customize the text position and its alignment.
• Options to customize the barcode height, width, background color, and foreground color.
• Options to render barcodes either as SVG or canvas graphics.

Let’s see how to generate 1D or linear barcodes, Data Matrix barcodes, and QR codes using Syncfusion’s new JavaScript Barcode Generator control.

Generate 1D or linear barcodes

Clone the Essential JS 2 quickstart project and install necessary packages using the following commands:

Dependent 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 for the barcode to index.html. [src/index.html]

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

Now, instantiate the Barcode Generator by specifying the barcode type, value, etc., in app.ts [src/app/app.ts]. The following code example will generate a 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 resultant Code 128 barcode will look like the following barcode.

Generate QR code

You can create a QR code using the same packages as mentioned in the previous section. The following code example illustrates how to create a 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 look like the following image.

Generate Data Matrix

You can create a Data Matrix barcode with the following code example.

/*[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 screenshot of the resultant Data Matrix barcode.

Conclusion

We hope you have a clear idea about the key features of our pure-JavaScript Barcode Generator control and how to integrate it into your web application. This Barcode Generator control is designed to be highly customizable.

To try our Barcode Generator control, please download our free trial. You can also check out its source on GitHub. For a more in-depth look at what you can do with the component, you can check out our online sample browser and documentation.

If you have any questions or need any clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!