JsBarcode是一個(gè)用JavaScript編寫(xiě)的條形碼生成器。它支持多種條形碼格式,可在瀏覽器和Node.js中使用。如果你在項(xiàng)目中使用了jquery也可以使用jquery,但它不是依賴項(xiàng)。
https://github.com/lindell/JsBarcode
<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();
<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
首先你的安裝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");
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電子郵件。
參考步驟:
VB
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
C#
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)); ?}
VB
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 = "
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
C#
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 = "
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); }
當(dāng)你指定有效地址并點(diǎn)擊Send Barcode Ticket后,你將收到上文附有條碼的HTML郵件
本文譯自neodynamic
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。