Syncfusion JavaScript Barcode Generator | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (73)Flutter  (136)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (964)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (147)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (341)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
EJ2 Barcode

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:

git clone quickstart
cd quickstart
npm install

Dependent packages must be mapped in the system.config.js configuration file.

    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',

Run the following command to start the application.

npm start

The resultant Code 128 barcode will look like the following barcode.Code 128 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',	

The generated QR code will look like the following image.QR code

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'

The following is a screenshot of the resultant Data Matrix barcode.Data Matrix barcode


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!


Share this post:

Comments (1)

[…] Introducing Syncfusion’s New JavaScript Barcode Generator Control (Kameshwaran R) […]

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed