JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

QR Code generator in JavaScript Barcode control

08 May 2023 / 2 minutes to read

QR Code

A QR Code is a two-dimensional barcode that consists of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically set the version according to the length of the input text. The QR Barcodes are designed for industrial uses and also commonly used in consumer advertising.

Source
Preview
index.ts
index.html
Copied to clipboard
import { QRCodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';

 let barcode = new QRCodeGenerator({
   width: '200px',
    height: '200px',
    displayText: { visibility: false },
    mode: 'SVG',
    value: 'Syncfusion',
 });
barcode.appendTo('#element');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Barcode</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<style>
    .barcodeStyle{
        height: 150px;
        width: 200px;
        padding-left: 40%;
        padding-top: 9%;
    }
    </style>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'class="barcodeStyle">
        <div id='element'></div>
    </div>
</body>

</html>

Customizing the Barcode color

A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases the barcode can also be customized to suit the needs. You can achieve this by using for forecolor property .

Source
Preview
index.ts
index.html
Copied to clipboard
import { QRCodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';

 let barcode = new QRCodeGenerator({
   width: '200px',
    height: '200px',
    displayText: { visibility: false },
    mode: 'SVG',
    value: 'Syncfusion',
    foreColor:'red',
 });
barcode.appendTo('#element');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Barcode</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<style>
    .barcodeStyle{
        height: 150px;
        width: 200px;
        padding-left: 40%;
        padding-top: 9%;
    }
    </style>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'class="barcodeStyle">
        <div id='element'></div>
    </div>
</body>

</html>

Customizing the Barcode dimension

The dimension of the barcode can be changed using the height and width properties of the barcodegenerator.

Source
Preview
index.ts
index.html
Copied to clipboard
import { QRCodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';

 let barcode = new QRCodeGenerator({
   width: '100px',
    height: '100px',
    displayText: { visibility: false },
    mode: 'SVG',
    value: 'Syncfusion',
 });
barcode.appendTo('#element');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Barcode</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<style>
    .barcodeStyle{
        height: 150px;
        width: 200px;
        padding-left: 40%;
        padding-top: 9%;
    }
    </style>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'class="barcodeStyle">
        <div id='element'></div>
    </div>
</body>

</html>

Customizing the text

In barcode generators You can customize the barcode text by using display text property .

Source
Preview
index.ts
index.html
Copied to clipboard
import { QRCodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';

 let barcode = new QRCodeGenerator({
   width: '200px',
    height: '200px',
    displayText: { visibility: true },
    mode: 'SVG',
    value: 'Syncfusion',
 });
barcode.appendTo('#element');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Barcode</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<style>
    .barcodeStyle{
        height: 150px;
        width: 200px;
        padding-left: 40%;
        padding-top: 9%;
    }
    </style>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'class="barcodeStyle">
        <div id='element'></div>
    </div>
</body>

</html>
Previous
Next