使用 HTML、CSS 和 JavaScript 构建标签打印软件

• 下载源代码 - 518.78 KB

引言

本文探讨了使用 JavaScript、HTML 和 CSS（层叠样式表）进行标签打印。我们经常听到的第一个疑问是“这可能吗？我连大多数网页都无法在我的打印机上正常打印”。我们也知道 HTML 是为了在数字媒体（如互联网）上共享信息而设计的，而 HTML 的核心在于信息的可访问性；它从来都不是为了打印而设计的。然而，我也相信浏览器技术正在融合，最终可以在不使用 PDF、SVG 或 XPS 等文档格式的情况下，在 Web 上实现功能齐全的标签打印软件。

背景

首先，我们应该对标签的本质有一个基本的了解。下图展示了一个简单的 3x2 标签布局。

我们经常使用标签，例如打印地址标签、标记仓库物品或给产品贴标签。通常，产品名称或 ID 等信息会打印在每个标签上。有时也会在标签上打印可变数据，例如邮件列表中的不同地址。Microsoft Word 也通过其邮件合并功能，利用 Microsoft Word 和 Excel 实现标签打印而广为人知。许多知名供应商也提供了适用于 Microsoft Word 的预设计模板或定制的标签软件。

有了这个基本理解，让我们深入探讨使用 HTML 和 CSS 进行标签打印的细节。我们要做的就是使用 **CSS 绝对定位**。绝对定位允许我们通过指定元素左上角的坐标来确定元素相对于其父元素的位置。我们可以将每个元素想象成一种包含信息内容的矩形框。

Using the Code

以下是为我们的标签定义的 CSS 类。

.label {
    background:white;
    position:absolute;
    border-collapse:collapse; 
    width:4.00in; 
    height:3.33in;
    margin: 0.00in;
    padding: 0;
    left: 0.00in;
    top: 0.00in;
    border:1px solid black;
    border-style:dotted;
}

我们为标签指定了 4 英寸的宽度和 3.33 英寸的高度。我们还指定了一个“虚线”边框，以便我们可以轻松地看到标签的轮廓。在我们的 HTML 文件中，我们将使用上面的标签类，并通过覆盖 CSS 类中的“left”和“top”字段来为每个标签指定绝对位置。

接下来，我们需要指定一个“纸张”来容纳我们的标签。我们可以使用以下 CSS 类来定义一个 8.5 英寸 x 11 英寸的信纸尺寸。

.paper {
      position:relative;
      margin: 0.00in;
      padding: 0;
      left: 0.00in;
      top: 0.00in;
      width: 8.5in;
      height: 11.0in;
      border:1px solid black;
      border-style:dotted;
}

我们的 HTML 文件很简单，看起来如下：

<div class="paper">
<div class="label" style="left:0.00in;top:0.00in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:4.188in;top:0.00in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:0.00in;top:3.33in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:4.188in;top:3.33in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:0.00in;top:6.66in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
<div class="label" style="left:4.188in;top:6.66in;margin-left:0.156in;
	margin-top:0.5in">Test Label</div>
</div>

我们为每个标签指定了“left”、“top”、“margin-left”和“margin-top”字段，以布局总共 6 个（3 行 x 2 列）标签。

这似乎并不太难。通过稍作修改，我们就可以实现不同尺寸的标签。如果我们使用一些 JavaScript 编程，我们应该能够处理几乎所有种类的标签组合。我们甚至可能能够设计一个所见即所得的标签，并在标签中填充不同的内容进行打印。

问题

现在让我们测试打印。使用我的 Internet Explorer 8 或 Mozilla 3.0+，我打印了我的 HTML 页面。用尺子测量标签后，我发现标签比预期的要小。问题出在哪里？

基本上，像 Internet Explorer 和 Mozilla Firefox 这样的浏览器现在都提供了一个名为“缩小以适应”（Shrink to Fit）的选项，以帮助您打印网页。这是我们不希望用于标签打印的默认行为。如果您使用的是 Internet Explorer，请在“页面设置”中取消选中“启用缩小至适合”选项。如果您使用的是 Mozilla，请在“打印选项”中取消选中“缩小至适合页面宽度”选项。

再次打印。尺寸现在是正确的。但是标签看起来不在正确的位置。它似乎向右和向下偏移了。那么，现在的问题是什么？

问题在于打印机边距。

转到 Internet Explorer->打印机->页面设置，或 Mozilla->文件->页面设置，或 Opera->文件->打印选项。

在边距设置中，将以下边距设置为零。

左：0，右：0，上：0，下：0

有时 Internet Explorer 不允许您输入零边距，如果出现这种情况，请使用浏览器提供的最小边距。对于 Mozilla，边距设置位于“边距和页眉/页脚”选项卡中。

完成这些设置后，让我们继续打印。

现在好多了，但标签仍然偏移且不在正确的位置。这目前是阻止我们使用 Web 技术进行标签打印的一些基本问题之一。但是，我们可以通过对 HTML 进行一些修改来克服这个问题。

解决方案

获取最新的打印输出，用尺子测量指定标签和实际打印标签之间的位置差异。从 HTML 中的“margin-left”和“margin-top”中减去这些数值。调整这些值，直到打印出的标签位于 HTML 中指定的位置。

HTML 标签打印的基础

上面的描述向我们展示了如何通过调整边距来使用 HTML 打印标签。我们可以将此过程视为一种 Web 标签软件的校准。

在校准过程中，用户将能够打印出带有特定位置线条的 HTML 页面。线条的实际位置与指定位置之间的差异将是我们需要进行校准的值。例如，如果我在一个 Letter 尺寸的页面中间打印一条垂直线，距离页面左侧 4.25 英寸。当这条线打印出来时，它实际上距离页面左侧 4.5 英寸。那么就有 -0.25 英寸的差异需要为我们的打印布局进行调整。我们利用 CSS 边距来进行这些 Web 打印的调整。

校准值也可以存储在持久存储中（例如文本文件），并且下次会自动加载该值。这样，用户只需校准一次，之后就可以正确地使用 HTML 打印标签。此过程类似于设置一次打印机，然后即可进行后续打印。

使用 JavaScript 和 jQuery 创建不同类型的标签

下面的 JavaScript 和 jQuery 代码展示了如何使用 CSS 绝对定位来创建不同类型的标签。

function CreateTemplateInches(paperWidth,paperHeight,marginLeft,
   marginTop,labelWidth,labelHeight,numRows,numColumns,horizontalSpace,verticalSpace)
{
	var paper=$('<div class="paper"></div>');
	paper.css('width',paperWidth+'in');
	paper.css('height',paperHeight+'in');
	paper.appendTo('#container');

	var i=0,j=0;
	var posix=0,posiy=0;
	var numrows=numRows, numcolumns=numColumns;
	for (i=0;i<numrows;i++)
	{
		posix=0;
		posiy=i*(labelHeight+verticalSpace);

		for (j=0;j<numcolumns;j++)
		{
			posix=j*(labelWidth+horizontalSpace);
			var label=$('<div class=label></div>;');
			label.css('margin-left',marginLeft+'in')
			     .css('margin-top',marginTop+'in')
			     .css('width',labelWidth+'in')
			     .css('height',labelHeight+'in')
			     .css('left',posix+'in')
			     .css('top',posiy+'in');
			paper.append(label);
		}
	}
};

关注点

Internet Explorer 7（及更高版本）、Mozilla 3.0（可能还有 2.0 及更高版本）、Mac 上的 Safari 5、Opera 10 和即将推出的 Google Chrome 6 都支持页面设置，其中一些选项可以启用和禁用缩小功能。我们相信主流浏览器正在朝着支持一组通用的打印功能发展。这些浏览器也正在朝着 HTML5 发展，并支持 CSS3、本地存储、Canvas 等更多有趣的功能。在不久的将来，使用 HTML、CSS 和 JavaScript 进行标签打印绝对是可行的。

开源项目

如果您喜欢您所阅读的内容，您可能会对我们的开源项目 labelgrid 标签软件感兴趣。在该项目中，我们尝试基于 HTML、JavaScript 和 CSS 等 Web 的开放技术构建功能齐全的标签打印软件。我们相信浏览器技术正在融合，最终可以在 Web 上实现功能齐全的标签打印软件（无需使用 PDF、SVG 或 XPS 等文档格式）。将 HTML 作为骨架也使我们能够轻松地将 labelgrid 移植到可能没有第三方插件的即将推出的移动平台。

历史

• 2010 年 6 月 29 日：首次发布到 CodeProject