使用 HTML,CSS和Javascript创建代码 39条码

分享于 

9分钟阅读

Web开发

  繁體

介绍

本文探讨了使用 Javascript。超文本标记语言( HTML ) 和级联样式表( CSS ) 来创建代码 39条码。 这个解决方案使用图形图像,并且克服了一些浏览器中数据URI特性的限制。 在创建条形码 比如 数据验证。检查字符生成和生成HTML条码的过程中,也不需要服务器端脚本。

Background

本文的目标之一是使用纯浏览器( 客户端) 技术来生成一个条形码。 首先要考虑的是使用图形图像,特别是考虑条形码包括 black 和白条的序列。 许多现代浏览器还支持数据统一资源定位器( URI ) 功能。 这里功能允许网页包含 inline 数据,如图像,如它们是外部资源一样。

然而,最常用的浏览器之一,IE ( 从当前v8.0开始) 并不完全支持数据 URI。 在IE8中,数据uri必须小于 32 KB。 当我们要求条码图像大于 32 KB时就会出现问题。

另一种解决方案是在服务器端生成条码图像。 但是目前使用的服务器技术很多,包括但不限于 Java。.NET。PHP。Perl。python 和 ruby。 我们希望有一个能够在所有服务器平台上工作的解决方案。 这意味着我们的解决方案必须在浏览器( 客户端) 端实现,而不需要使用图形图像。

解决办法是什么呢

在网页上呈现条形码最简单最简单的方法是在HTML表格中使用 background 颜色。 条形码的每个 black 和白条都可以用不同的颜色表示表的不同列。 但是,在进一步研究时,这里实现是proned的问题。 现代浏览器 比如 IE,实现功能来启用和禁用 background 颜色和图像的打印。 如果你选择了条码( 使用HTML表格生成),则该选项设置为"已经禁用",换句话说,可能不会显示为浏览器选择不打印 background 时显示。 要打印这些条形码,用户需要按照指令来启用"打印 background 颜色和图像"选项。

经过深思熟虑和分析之后,我们使用了一个解决方案来利用 HTML span 元素。 下面是一个示例:

<SPANstyle="BORDER-LEFT: black 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: white 0.06in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: black 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: white 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN>

条形码由一系列 span 元素表示,每个元素都有不同的宽度代表条形码的条形码。 span 元素也有交替的black 和白色,它们之间没有任何空格。 源zip文件中包含的Javascript代码基本上将输入数据转换为一系列交替 black 和白条,如 below 所示。 条形码中人类可读的文本部分也使用HTML文本呈现。

 htmlbarcode1.png

使用代码

创建一个HTML文件( 或者,你可以使用源zip文件中提供的Code39Barcode.html 文件)。 在该文件中,包含代码 39条码创建脚本。

<scripttype="text/javascript"src="code39.js"></script>

这个脚本可以生成代码 39条码。 第一个参数是输入数据,第二个参数是指示是否生成检查 chracter。

DrawCode39Barcode("123456",1);

要使用 上面 函数,请将以下部分包含到HTML文件的body 中。

<divid="externalbox"style="width:4in"><divid="inputdata">123456</div></div><br/><scripttype="text/javascript">/* <![CDATA[ */function get_object(id) {
 var object = null;
 if (document.layers) {
 object = document.layers[id];
 } elseif (document.all) {
 object = document.all[id];
 } elseif (document.getElementById) {
 object = document.getElementById(id);
 }
 return object;
 }
get_object("inputdata").innerHTML=DrawCode39Barcode(get_object("inputdata").innerHTML,1);/* ]]> */</script>

主要操作是:

get_object("inputdata").innerHTML=DrawCode39Barcode(get_object("inputdata").innerHTML,1);

此行代码获取 id="inputdata"的div元素并将它的替换为Javascript函数 DrawCode39Barcode的输出。 函数的输出是一系列 span 元素,如 上面 所描述的。

HTML文件的输出如下所示:

 htmlbarcode2.png

了解代码

Javascript代码将输入数据字符转换为一系列条码模式,然后将模式转换为一系列 HTML span 元素。 例如字符" 1"被转换为 Pattern"wttwttttwt"。 barcode'被称为条形码的薄条'known是条码的粗栏。 在代码 39规范下,厚条可以从 2 -3x的宽度来表示薄条的宽度。 所以创建代码 39条码的第一步意味着将输入数据转换为一系列粗细和薄条形图案。 例如输入" 123"可以转换为以下模式:

wttwttttwtttwwttttwtwtwwtttttt""

"encodecode39"javascript函数执行描述了 上面的任务。

function EncodeCode39(data,checkDigit)
 {
 var fontOutput = ConnectCode_Encode_Code39(data,checkDigit);
 var output = "";
 var pattern = "";
 for (x = 0; x <fontOutput.length; x++)
 {
 switch (fontOutput.substr(x,1))
 {
 case'1':
 pattern = "wttwttttwt";
 break;
 case'2':
 pattern = "ttwwttttwt";
 break;
 case'3':
 pattern = "wtwwtttttt";
. 
. 
. 
. 
. 
 case'Z':
 pattern = "twwtwttttt";
 break;
 default : break;
 }
 output=output+pattern;
 }
 return output;
 }

下一步是将条码模式转换为一系列 HTML span 元素。

wttwttttwtttwwttttwtwtwwtttttt""

上面 转换为以下模式的一系列模式:

<SPANstyle="BORDER-LEFT: black 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: white 0.06in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: black 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: white 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: black 0.06in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: white 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: black 0.06in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN><SPANstyle="BORDER-LEFT: white 0.02in solid; DISPLAY: inline-block; HEIGHT: 1in"></SPAN>.
.
.

执行这里任务的代码在函数" DrawBarcode_Code39"中找到。 值得注意的其他函数是生成检查字符的代码。 这可以在" generateCheckDigit"函数中找到。

Points of Interest

该解决方案已经被测试为在以下浏览器上工作:

  • IE 6,7和 8
  • Firefox 3.5 +
  • Chrome 5,6
  • Opera 10 +
  • Safari 5

条码打印出来后,可以通过各种品牌的条码扫描器进行扫描。 最重要的是,大多数更新的浏览器也倾向于精确地对 HTML span 元素的宽度设置。 这允许创建非常精确的条码。 而且,记住这个解决方案很重要,因为它没有使用服务器端编程或者图形图像技术。


相关文章