在Javascript中优雅的生成条形码-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();

安装使用

浏览器使用

你可以下载完整的支持所有受支持的条形码，也可以下载特定的条形码，根据自己的需要进行下载，具体的下载地址可以到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");

所有配置项

总结

JSBarcode是一个条形码JavaScript中的条形码生成插件，支持浏览器端和nodejs，在很多业务场景下都可以使用到，非常的简单实用！希望对你有所帮助！

astReport 2018.2支持导出中的矢量图形，现在一些条形码和SVG图像以矢量形式导出，适用于导出为PDF，HTML和SVG。条形码——只能将线性条形码导出为矢量图像，在当前版本的2018.2.22中，在PDF导出设置窗口中添加了矢量图像设置的特殊选项卡——“Vector Graphics矢量图形”。

这里我们有两种类型的设置——渐变质量和曲线。渐变的质量影响过渡的平滑度，即阴影的数量，渐变插值确定点处的渐变的维度。曲线插值允许绘制具有给定数量的段的曲线，相反，指定将用于创建段的点数，插值使曲线更圆，插值越高，获得的曲线越圆。旧版本的一些PDF阅读器在显示矢量图形方面存在问题，因此FastReport开发了自己的曲线构建器，如果关闭插值选项，PDF阅读器将选择如何构建曲线。

下面来看看渐变设置，PDF中的渐变是在渐变网格上生成的，即生成网格，在网格节点上计算网格颜色，然后创建复杂渐变。渐变的质量会影响将生成的网格的大小，渐变质量越高，生成的网格就越准确。但是，图像创建的速度将受到影响，渐变的插值显示PDF中将使用的网格大小，值越高，越漂亮，但磁盘上将占用更多空间。如果设置低质量并插值256，则这是渐变的外观：

高质量，插值256。

眼睛几乎看不到差异，但在复杂的梯度上可以更好地看到这种差异。例如，低质量：

高质量。

但是，如果将梯度插值的值更改为最小值，则通常的线性渐变会立即显示出差异。例如，插值2：

插值为16：

现在考虑曲线的插值是如何操作的，例如有一个SVG图像——圆圈，使用标签实现：

使用8段进行渲染，设置值8来插入曲线：

插值越大，曲线越圆，例如，通过较大的圆圈近似，可以看到：

可以看出，圆圈完全不是圆形的，它由许多部分组成。这里的情况与曲线完全相同，毕竟，符号也包含曲线。因此，文本插值的值越大，看起来越“定性”。“为什么需要这些设置？显然，需要使用最大设置来获得高质量的图像。但是高设置会显着增加生成文件的大小。如果不需要最高质量的渐变和曲线，可以牺牲它们来减小文档的大小并提高其创建速度。乍一看，新选项似乎对普通用户没什么用处，但是那些使用矢量图形的人会青睐它们，FastReport提供了SVG图像渲染器。

点击“了解更多”下载产品最新版

↓↓↓

时候我们需要以邮件形式发送附有条形码的门票、实施通讯、请柬。那么面对这样的情况我们该怎么处理呢？今天我们将介绍如何用Barcode Professional生成及发送有条形码的HTML电子邮件。

参考步骤：

打开ASP.NET 编辑器（Microsoft Visual Studio 2005, Visual Web Developer Express Edition 或者Microsoft Expression Web）创建ASP.NET网站，添加一个空白页。
添加引用 Neodynamic.WebControls.BarcodeProfessional.dll 组件。
创建一个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服务器），会得到下图。

当你指定有效地址并点击Send Barcode Ticket后，你将收到上文附有条码的HTML邮件

本文译自neodynamic

本站文章除注明转载外，均为本站原创或翻译

在线咨询

上一篇：HTML简介与网页组成基本元素
下一篇：40篇最受网友欢迎的web前端HTML精选文章合集

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商