您好,登錄后才能下訂單哦!
Syncfusion的Web(Essential JS 2)平臺中包含一個(gè)新的、功能強(qiáng)大的純JavaScript條形碼生成器控件。這種條形碼生成器控制重量輕、易于使用、易于集成。它可以使用JavaScript創(chuàng)建和顯示行業(yè)標(biāo)準(zhǔn)的一維條形碼、Data Matrix條形碼和QR碼,生成的條形碼針經(jīng)過優(yōu)化,可用于打印和屏幕掃描。該控件可與其他第三方Web框架(如Angular、React和Vue.js)互操作。
JavaScript條形碼生成器控件主要特點(diǎn):
各種條形碼符號,包括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)。
用于自定義文本位置及其對齊的選項(xiàng)。
用于自定義條形碼高度、寬度、背景顏色和前景色的選項(xiàng)。
用于將條形碼呈現(xiàn)為SVG或畫布圖形的選項(xiàng)。
如何使用Syncfusion的新JavaScript條形碼生成器控件生成一維或線性條形碼、Data Matrix條形碼和QR碼呢?請繼續(xù)往下看吧~
生成1D或線性條形碼
克隆項(xiàng)目并使用以下命令安裝必要的包:
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]中指定條形碼類型、值等來實(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條形碼將類似于以下條形碼:
生成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條形碼的屏幕截圖:
此條形碼生成器控件旨在實(shí)現(xiàn)高度可定制。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。