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

左手的ㄟ右手 2024-04-17 18:50 52阅读 0赞

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中\]

<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条形码将类似于以下条形码：

![Code-128-barcode (1).png][Code-128-barcode _1_.png]

**生成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码将如下图所示：

![QR-code-1.png][]

**生成数据矩阵**

您可以使用以下代码示例创建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条形码的屏幕截图：

![2.png][]

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

[Code-128-barcode _1_.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuZXZnZXQuY29tL0NvbnRlbnQvaW1hZ2VzLzIwMTkwOC8xOS8xNTY2MTc5OTA3LnBuZw?x-oss-process=image/format,png
[QR-code-1.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuZXZnZXQuY29tL0NvbnRlbnQvaW1hZ2VzLzIwMTkwOC8xOS8xNTY2MTgwMDAwLnBuZw?x-oss-process=image/format,png
[2.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuZXZnZXQuY29tL0NvbnRlbnQvaW1hZ2VzLzIwMTkwOC8xOS8xNTY2MTgwMzg1LnBuZw?x-oss-process=image/format,png