Syncfusion的新JavaScript条形码生成器控件

Syncfusion的Web（Essential JS 2）平台中包含一个新的、功能强大的纯JavaScript条形码生成器控件。这种条形码生成器控制重量轻、易于使用、易于集成。它可以使用JavaScript创建和显示行业标准的一维条形码、Data Matrix条形码和QR码，生成的条形码针经过优化，可用于打印和屏幕扫描。该控件可与其他第三方Web框架（如Angular、React和Vue.js）互操作。

JavaScript条形码生成器控件主要特点：

• 各种条形码符号，包括Code 39、Code 39扩展、Code 11、Codabar、Code 32、Code 93、Code 93扩展、Code 128、UPC-A、UPC-E、EAN-8、EAN-13、数据矩阵和QR码。

• 显示带有或不带有人类可读文本的条形码的选项。

• 用于自定义文本位置及其对齐的选项。

• 用于自定义条形码高度、宽度、背景颜色和前景色的选项。

• 用于将条形码呈现为SVG或画布图形的选项。

如何使用Syncfusion的新JavaScript条形码生成器控件生成一维或线性条形码、Data Matrix条形码和QR码呢？请继续往下看吧~

生成1D或线性条形码

克隆项目并使用以下命令安装必要的包：

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

必须在system.config.js 配置文件中映射从属软件包。

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

将条形码的HTML div元素添加到index.html。[SRC / index.html中]

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

然后通过在app.ts [src/app/app.ts]中指定条形码类型、值等来实例化条形码生成器。以下代码示例将生成Code 128条形码：

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

运行以下命令以启动该应用程序：

npm start

生成的Code 128条形码将类似于以下条形码：

生成QR码

以下代码示例说明了如何创建QR代码：

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

生成的QR码将如下图所示：

生成数据矩阵

您可以使用以下代码示例创建Data Matrix条形码：

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

以下是生成的Data Matrix条形码的屏幕截图：

此条形码生成器控件旨在实现高度可定制。