在Javascript中優(yōu)雅的生成條形碼-Jsbarcode

言

JsBarcode是一個(gè)用JavaScript編寫(xiě)的條形碼生成器。它支持多種條形碼格式，可在瀏覽器和Node.js中使用。如果你在項(xiàng)目中使用了jquery也可以使用jquery，但它不是依賴項(xiàng)。

github

https://github.com/lindell/JsBarcode

支持的條形碼種類

CODE128
CODE128 (automatic mode switching)
CODE128 A/B/C (force mode)
EAN
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
UPC (E)
CODE39
ITF
ITF
ITF-14
MSI
MSI10
MSI11
MSI1010
MSI1110
Pharmacode
Codabar

瀏覽器中使用舉例

通過(guò)svg、canvas、img都可以

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");

JsBarcode("#barcode", "1234", {
 format: "pharmacode",
 lineColor: "#0aa",
 width:4,
 height:40,
 displayValue: false
});

你也可以使用一些自定義的配置

JsBarcode("#barcode", "1234", {
 format: "pharmacode",
 lineColor: "#0aa",
 width:4,
 height:40,
 displayValue: false
});

更高級(jí)的用法

JsBarcode("#barcode")
 .options({font: "OCR-B"}) // Will affect all barcodes
 .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
 .blank(20) // Create space between the barcodes
 .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
 .render();

直接在html標(biāo)簽中使用

<svg class="barcode"
 jsbarcode-format="upc"
 jsbarcode-value="123456789012"
 jsbarcode-textmargin="0"
 jsbarcode-fontoptions="bold">
</svg>

初始化還是需要的

JsBarcode(".barcode").init();

安裝使用

瀏覽器使用

你可以下載完整的支持所有受支持的條形碼，也可以下載特定的條形碼，根據(jù)自己的需要進(jìn)行下載，具體的下載地址可以到github下載。

瀏覽器引入

<script src="JsBarcode.all.min.js"></script>

使用broser或者npm包管理

bower install jsbarcode --save
npm install jsbarcode --save

nodejs使用

首先你的安裝jsbarcode和canvas

npm install jsbarcode
npm install canvas

使用簡(jiǎn)單案例

var JsBarcode = require('jsbarcode');
// Canvas v1
var Canvas = require("canvas");
// Canvas v2
var { createCanvas } = require("canvas");
// Canvas v1
var canvas = new Canvas();
// Canvas v2
var canvas = createCanvas();
JsBarcode(canvas, "Hello");

所有配置項(xiàng)

總結(jié)

JSBarcode是一個(gè)條形碼JavaScript中的條形碼生成插件，支持瀏覽器端和nodejs，在很多業(yè)務(wù)場(chǎng)景下都可以使用到，非常的簡(jiǎn)單實(shí)用！希望對(duì)你有所幫助！

astReport 2018.2支持導(dǎo)出中的矢量圖形，現(xiàn)在一些條形碼和SVG圖像以矢量形式導(dǎo)出，適用于導(dǎo)出為PDF，HTML和SVG。條形碼——只能將線性條形碼導(dǎo)出為矢量圖像，在當(dāng)前版本的2018.2.22中，在PDF導(dǎo)出設(shè)置窗口中添加了矢量圖像設(shè)置的特殊選項(xiàng)卡——“Vector Graphics矢量圖形”。

這里我們有兩種類型的設(shè)置——漸變質(zhì)量和曲線。漸變的質(zhì)量影響過(guò)渡的平滑度，即陰影的數(shù)量，漸變插值確定點(diǎn)處的漸變的維度。曲線插值允許繪制具有給定數(shù)量的段的曲線，相反，指定將用于創(chuàng)建段的點(diǎn)數(shù)，插值使曲線更圓，插值越高，獲得的曲線越圓。舊版本的一些PDF閱讀器在顯示矢量圖形方面存在問(wèn)題，因此FastReport開(kāi)發(fā)了自己的曲線構(gòu)建器，如果關(guān)閉插值選項(xiàng)，PDF閱讀器將選擇如何構(gòu)建曲線。

下面來(lái)看看漸變?cè)O(shè)置，PDF中的漸變是在漸變網(wǎng)格上生成的，即生成網(wǎng)格，在網(wǎng)格節(jié)點(diǎn)上計(jì)算網(wǎng)格顏色，然后創(chuàng)建復(fù)雜漸變。漸變的質(zhì)量會(huì)影響將生成的網(wǎng)格的大小，漸變質(zhì)量越高，生成的網(wǎng)格就越準(zhǔn)確。但是，圖像創(chuàng)建的速度將受到影響，漸變的插值顯示PDF中將使用的網(wǎng)格大小，值越高，越漂亮，但磁盤(pán)上將占用更多空間。如果設(shè)置低質(zhì)量并插值256，則這是漸變的外觀：

高質(zhì)量，插值256。

眼睛幾乎看不到差異，但在復(fù)雜的梯度上可以更好地看到這種差異。例如，低質(zhì)量：

高質(zhì)量。

但是，如果將梯度插值的值更改為最小值，則通常的線性漸變會(huì)立即顯示出差異。例如，插值2：

插值為16：

現(xiàn)在考慮曲線的插值是如何操作的，例如有一個(gè)SVG圖像——圓圈，使用標(biāo)簽實(shí)現(xiàn)：

使用8段進(jìn)行渲染，設(shè)置值8來(lái)插入曲線：

插值越大，曲線越圓，例如，通過(guò)較大的圓圈近似，可以看到：

可以看出，圓圈完全不是圓形的，它由許多部分組成。這里的情況與曲線完全相同，畢竟，符號(hào)也包含曲線。因此，文本插值的值越大，看起來(lái)越“定性”。“為什么需要這些設(shè)置？顯然，需要使用最大設(shè)置來(lái)獲得高質(zhì)量的圖像。但是高設(shè)置會(huì)顯著增加生成文件的大小。如果不需要最高質(zhì)量的漸變和曲線，可以犧牲它們來(lái)減小文檔的大小并提高其創(chuàng)建速度。乍一看，新選項(xiàng)似乎對(duì)普通用戶沒(méi)什么用處，但是那些使用矢量圖形的人會(huì)青睞它們，F(xiàn)astReport提供了SVG圖像渲染器。

點(diǎn)擊“了解更多”下載產(chǎn)品最新版

↓↓↓

時(shí)候我們需要以郵件形式發(fā)送附有條形碼的門(mén)票、實(shí)施通訊、請(qǐng)柬。那么面對(duì)這樣的情況我們?cè)撛趺刺幚砟兀拷裉煳覀儗⒔榻B如何用Barcode Professional生成及發(fā)送有條形碼的HTML電子郵件。

參考步驟：

打開(kāi)ASP.NET 編輯器（Microsoft Visual Studio 2005, Visual Web Developer Express Edition 或者M(jìn)icrosoft Expression Web）創(chuàng)建ASP.NET網(wǎng)站，添加一個(gè)空白頁(yè)。
添加引用 Neodynamic.WebControls.BarcodeProfessional.dll 組件。
創(chuàng)建一個(gè)WebForm，像下圖一樣。添加一個(gè)文本框和一個(gè)按鈕控制。

在WebForm類文件里寫(xiě)入下面的方法。這方法叫GetBarcodeImage，它可生成編碼隨機(jī)值的條碼圖像，能夠嵌入到HTML郵件里。

Private?Function?GetBarcodeImage?As?System.IO.MemoryStream
?'Create?an?instance?of?BarcodeProfessional?class
?Dim?bcp?As?New?Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional
?
?'Set?barcode?settings...
?'Code?128?symbology
?bcp.Symbology?=?Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128
?'Set?a?fictitious?value?to?encode
?bcp.Code?=?Guid.NewGuid.ToString.Replace("-",?"").Substring(0,?20).ToUpper
?
?'Return?barcode?stream
?Return?New?System.IO.MemoryStream(bcp.GetBarcodeImage(System.Drawing.Imaging.ImageFormat.Png))
?End?Function

private?System.IO.MemoryStream?GetBarcodeImage
?{
?//Create?an?instance?of?BarcodeProfessional?class
?Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional?bcp?=?new?Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional;
?
?//Set?barcode?settings...
?//Code?128?symbology
?bcp.Symbology?=?Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128;
?//Set?a?fictitious?value?to?encode
?bcp.Code?=?Guid.NewGuid.ToString.Replace("-","").Substring(0,20).ToUpper;
?
?//Return?barcode?stream
?return?new?System.IO.MemoryStream(bcp.GetBarcodeImage(System.Drawing.Imaging.ImageFormat.Png));
?}

在按鈕點(diǎn)擊事件過(guò)程中，用System.Net.Mail 類嵌入到用上文方法生成的條碼圖像。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 'Create the mail message Dim mail As New System.Net.Mail.MailMessage 'Set the email addresses mail.From = New System.Net.Mail.MailAddress("me@mycompany.com") mail.To.Add(Me.TextBox1.Text) 'Set the subject mail.Subject = "John Doe in Concert - Barcode Ticket" 'Create the Html part. 'To embed the barcode image, we need to use the prefix cid in the img src attribute. 'The cid value will map to the Content-Id of a Linked resource. 'Example:

will map to a LinkedResource with a ContentId of barcodeticket Dim htmlContent1 As String = "

" Dim htmlContent2 As String = "" Dim htmlContent3 As String = "

NEOMIX
ADMIT ONE
NEO STADIUM
GENERAL ADMISSION
John Doe in Concert
May 19 2007	SATURDAY 8:00 PM
$ 98.00

" Dim htmlView As System.Net.Mail.AlternateView = System.Net.Mail.AlternateView.CreateAlternateViewFromString(htmlContent1 + htmlContent2 + htmlContent3, Nothing, "text/html") 'Create the LinkedResource (embedded barcode image) Dim barcode As New System.Net.Mail.LinkedResource(Me.GetBarcodeImage, "image/png") barcode.ContentId = "barcodeticket" 'Add the LinkedResource to the view htmlView.LinkedResources.Add(barcode) 'Add the view mail.AlternateViews.Add(htmlView) 'specify the mail server address Dim smtp As New System.Net.Mail.SmtpClient("127.0.0.1") 'send the message smtp.Send(mail) End Sub

protected void Button1_Click(object sender, EventArgs e) { //Create the mail message System.Net.Mail.MailMessage mail = new System.Net.Mail.MailMessage; //Set the email addresses mail.From = new System.Net.Mail.MailAddress("me@mycompany.com"); mail.To.Add(this.TextBox1.Text); //Set the subject mail.Subject = "John Doe in Concert - Barcode Ticket"; //Create the Html part. //To embed the barcode image, we need to use the prefix 'cid' in the img src attribute. //The cid value will map to the Content-Id of a Linked resource. //Example:

will map to a LinkedResource with a ContentId of 'barcodeticket' string htmlContent1 = "

"; string htmlContent2 = ""; string htmlContent3 = "

NEOMIX
ADMIT ONE
NEO STADIUM
GENERAL ADMISSION
John Doe in Concert
May 19 2007	SATURDAY 8:00 PM
$ 98.00

"; System.Net.Mail.AlternateView htmlView = System.Net.Mail.AlternateView.CreateAlternateViewFromString(htmlContent1 + htmlContent2 + htmlContent3, null, "text/html"); //Create the LinkedResource (embedded barcode image) System.Net.Mail.LinkedResource barcode = new System.Net.Mail.LinkedResource(this.GetBarcodeImage, "image/png"); barcode.ContentId = "barcodeticket"; //Add the LinkedResource to the view htmlView.LinkedResources.Add(barcode); //Add the view mail.AlternateViews.Add(htmlView); //specify the mail server address System.Net.Mail.SmtpClient smtp = new System.Net.Mail.SmtpClient("127.0.0.1"); //send the message smtp.Send(mail); }

完成！建立項(xiàng)目進(jìn)行測(cè)試（上面代碼中需指定一個(gè)有效的電子郵件賬戶和SMTP服務(wù)器），會(huì)得到下圖。

當(dāng)你指定有效地址并點(diǎn)擊Send Barcode Ticket后，你將收到上文附有條碼的HTML郵件

本文譯自neodynamic

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯

在線咨詢

上一篇：HTML簡(jiǎn)介與網(wǎng)頁(yè)組成基本元素
下一篇：40篇最受網(wǎng)友歡迎的web前端HTML精選文章合集

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商