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）互操作。

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)安仁免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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?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)高度可定制。

分享標(biāo)題：Syncfusion的新JavaScript條形碼生成器控件
網(wǎng)站URL：http://aaarwkj.com/article26/jjphcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、ChatGPT、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)