65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 HTML、CSS 和 Javascript 创建 Code 39 条形码

ConnectCode
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.85/5 (23投票s)

2011 年 1 月 14 日

GPL3

5分钟阅读

viewsIcon

331138

downloadIcon

16293

使用 HTML、CSS 和 Javascript 创建 Code 39 条形码

引言

本文探讨了如何使用 Javascript、超文本标记语言 (HTML) 和层叠样式表 (CSS) 来创建 Code 39 条形码。所描述的解决方案不使用图形图像，并克服了某些浏览器对 Data URI 功能支持有限的问题。此外，由于条形码创建步骤（例如数据验证、校验字符生成和 HTML 条形码生成）均在 Javascript 中执行，因此不需要服务器端脚本。

背景

本文的一个目标是提供一种仅使用浏览器（客户端）技术生成条形码的解决方案。首先想到的是利用图形图像，特别是考虑到条形码由一系列黑白条组成。许多现代浏览器也支持数据统一资源定位器 (URI) 功能。此功能允许网页像包含外部资源一样，将内联数据（如图像）包含进来。

然而，最常用的浏览器之一 Internet Explorer（截至当前 v8.0）并不完全支持数据 URI。在 IE8 中，数据 URI 必须小于 32KB。当我们需要的条形码图像大于 32KB 时，这就会带来问题。

另一种解决方案是在服务器端生成条形码图像。然而，如今有许多服务器技术，包括但不限于 Java、.Net、PHP、Perl、Python 和 Ruby。我们希望有一种适用于所有服务器平台的解决方案。这意味着我们的解决方案必须在浏览器（客户端）端实现，而不使用图形图像。

解决方案

在网页上渲染条形码最简单易行的方法是利用 HTML 表格的背景颜色。条形码的每个黑白条都可以用表格的不同列使用不同的颜色来表示。然而，经过进一步调查，这种实现容易出现问题。例如 Internet Explorer 等现代浏览器实现了启用和禁用打印背景颜色和图像的功能。默认情况下，此选项设置为“禁用”，即当打印条形码（使用 HTML 表格生成）时，条形码可能不会显示，因为浏览器选择不打印背景。要打印此类条形码，用户需要按照说明启用“打印背景颜色和图像”选项。

经过深思熟虑和分析，我们采用了利用 HTML span 元素来解决问题。示例如下：

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

条形码由一系列 span 元素表示，每个 span 元素具有不同的宽度，代表条形码的一个条。span 元素还具有交替的黑白颜色，它们之间没有间隙。包含在源 zip 文件中的 Javascript 代码基本上会将输入数据转换为一系列交替的黑白条，如下图所示。条形码的可读文本部分也使用 HTML 文本渲染。

htmlbarcode1.png

Using the Code

创建一个 HTML 文件（或者您可以使用源 zip 文件中提供的Code39Barcode.html文件）。在该文件中，包含 Code 39 条形码创建脚本。

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

该脚本支持生成 Code 39 条形码。第一个参数是输入数据，第二个参数指示是否生成校验字符。

			
DrawCode39Barcode("123456",1);

要使用上述函数，请将以下部分包含在 HTML 文件的 body 中。

			
<div id="externalbox" style="width:4in">
<div id="inputdata">123456</div>
</div>
 
<br />
 
<script type="text/javascript">
/* <![CDATA[ */
  function get_object(id) {
   var object = null;
   if (document.layers) {
    object = document.layers[id];
   } else if (document.all) {
    object = document.all[id];
   } else if (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”被转换为图案“wttwttttwt”。在条形码中，'t' 被称为细条，而 'w' 被称为粗条。根据 Code 39 规范，粗条的宽度可以是细条的 2-3 倍。因此，创建 Code 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"

上述图案系列将被转换为以下内容：

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

执行此任务的代码位于“DrawBarcode_Code39”函数中。其他值得提及的函数是用于生成校验字符的代码。可以在“generateCheckDigit”函数中找到。

关注点

该解决方案已测试并在以下浏览器上运行：

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

打印条形码时，可以轻松地被各种品牌的条形码扫描仪扫描。此外，大多数较新的浏览器也倾向于非常准确地遵循 HTML span 元素的宽度设置。这使得可以创建非常精确的条形码。此外，重要的是要记住，这个解决方案很有趣，因为它不使用服务器端编程或图形图像技术。

© . All rights reserved.