Shulou(Shulou.com)06/03 Report--

Syncfusion's Web (Essential JS 2) platform includes a new, powerful, pure JavaScript barcode generator control. This barcode generator control is lightweight, easy to use and easy to integrate. It uses JavaScript to create and display industry-standard 1D barcodes, Data Matrix barcodes, and QR codes, resulting in barcode needles optimized for printing and screen scanning. The control interoperates with other third-party Web frameworks such as Angular, React, and Vue.js.

JavaScript Barcode Generator Control Key Features:

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.

An option to display barcodes with or without human-readable text.

Options for customizing text position and alignment.

Options for customizing barcode height, width, background color, and foreground color.

Options for rendering barcodes as SVG or canvas graphics.

How do I generate 1D or linear barcodes, Data Matrix barcodes, and QR codes using Syncfusion's new JavaScript barcode generator control? Please keep looking down ~

Generate 1D or linear barcodes

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

git clone https://github.com/syncfusion/ej2-quickstart.git quickstartcd quickstartnpm install

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 of the barcode to index.html. [SRC/index.html]

The barcode generator is then instantiated by specifying barcode type, value, etc. in app.ts [src/app/app.ts]. The following code example generates 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 launch the application:

npm start

The resulting Code 128 barcode will resemble the following barcode:

QR code generation

The following code example illustrates how to create QR codes:

/*[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 QR code generated will look like this:

Generating Data Matrix

You can create a Data Matrix barcode using 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');

Here is a screenshot of the generated Data Matrix barcode:

This barcode generator control is designed to be highly customizable.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.