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

翻译|其它|编辑:陈津勇|2019-08-19 10:22:08.230|阅读 37 次

概述:本文将为您介绍Syncfusion的Web(Essential JS 2)平台中新的纯JavaScript条形码生成器控件,通过本文,你将了解新控件的关键特性及使用方法。

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

点击下载Essential Studio for JavaScript最新版

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

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

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

通过以上信息,你有没有对新控件的关键功能以及如何将其集成到Web应用程序中有一个清晰的认识呢?欢迎留言告诉我们哦~

另外,要使用这款纯JavaScript条形码生成器,可以先下载【免费试用版】体验一下!



想要了解Essential Studio for JavaScript更多资源的朋友,请点这里。

想要获取Essential Studio for JavaScript正版授权的朋友,请点这里。

1565166511625_12201A8E-ADC2-4723-A4C7-A25BEBC0575B(1).png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Essential Studio for JavaScript

首款专门用于LOB应用开发的JavaScript框架

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat