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

言

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

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

瀏覽器中使用舉例

通過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
});

更高級的用法

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標簽中使用

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

初始化還是需要的

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

安裝使用

瀏覽器使用

你可以下載完整的支持所有受支持的條形碼，也可以下載特定的條形碼，根據(jù)自己的需要進行下載，具體的下載地址可以到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

使用簡單案例

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");

所有配置項

總結(jié)

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

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

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

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

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

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

高質(zhì)量。

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

插值為16：

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

使用8段進行渲染，設(shè)置值8來插入曲線：

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

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

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

↓↓↓

時候我們需要以郵件形式發(fā)送附有條形碼的門票、實施通訊、請柬。那么面對這樣的情況我們該怎么處理呢？今天我們將介紹如何用Barcode Professional生成及發(fā)送有條形碼的HTML電子郵件。

參考步驟：

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

在WebForm類文件里寫入下面的方法。這方法叫GetBarcodeImage，它可生成編碼隨機值的條碼圖像，能夠嵌入到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));
?}

在按鈕點擊事件過程中，用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); }

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

當你指定有效地址并點擊Send Barcode Ticket后，你將收到上文附有條碼的HTML郵件

本文譯自neodynamic

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商