欧美日韩国产在,五月花综合视频,麻豆系列在线视频

解讀：Syncfusion的新JavaScript條形碼生成器控件

翻譯|其它|編輯：陳津勇|2019-08-19 10:22:08.230|閱讀 317 次

概述：本文將為您介紹Syncfusion的Web（Essential JS 2）平臺(tái)中新的純JavaScript條形碼生成器控件，通過本文，你將了解新控件的關(guān)鍵特性及使用方法。

Syncfusion的Web（Essential JS 2）平臺(tái)中包含一個(gè)新的、功能強(qiáng)大的純JavaScript條形碼生成器控件。這種條形碼生成器控制重量輕、易于使用、易于集成。它可以使用JavaScript創(chuàng)建和顯示行業(yè)標(biāo)準(zhǔn)的一維條形碼、Data Matrix條形碼和QR碼，生成的條形碼針經(jīng)過優(yōu)化，可用于打印和屏幕掃描。該控件可與其他第三方Web框架（如Angular、React和Vue.js）互操作。

點(diǎn)擊下載Essential Studio for JavaScript最新版

JavaScript條形碼生成器控件主要特點(diǎn)：

各種條形碼符號(hào)，包括Code 39、Code 39擴(kuò)展、Code 11、Codabar、Code 32、Code 93、Code 93擴(kuò)展、Code 128、UPC-A、UPC-E、EAN-8、EAN-13、數(shù)據(jù)矩陣和QR碼。
顯示帶有或不帶有人類可讀文本的條形碼的選項(xiàng)。
用于自定義文本位置及其對(duì)齊的選項(xiàng)。
用于自定義條形碼高度、寬度、背景顏色和前景色的選項(xiàng)。
用于將條形碼呈現(xiàn)為SVG或畫布圖形的選項(xiàng)。

如何使用Syncfusion的新JavaScript條形碼生成器控件生成一維或線性條形碼、Data Matrix條形碼和QR碼呢？請(qǐng)繼續(xù)往下看吧~

生成1D或線性條形碼

克隆項(xiàng)目并使用以下命令安裝必要的包：

git clone //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]中指定條形碼類型、值等來實(shí)例化條形碼生成器。以下代碼示例將生成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');

運(yùn)行以下命令以啟動(dòng)該應(yīng)用程序：

npm start

生成的Code 128條形碼將類似于以下條形碼：

Code-128-barcode (1).png

生成QR碼

以下代碼示例說明了如何創(chuàng)建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碼將如下圖所示：

生成數(shù)據(jù)矩陣

您可以使用以下代碼示例創(chuàng)建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條形碼的屏幕截圖：