介绍
本文探讨了如何使用JavaScript，HTML和CSS(级联样式表)进行标签打印。
背景
首先，我们应该对标签的真正含义有一个基本的了解。下图显示了一个简单的3x2标签。
我们经常使用它，例如打印地址标签，为仓库物品加标签或为产品加标签。通常，产品名称或ID等信息会打印在每个标签上。有了这个基本的理解，深入了解使用HTML和CSS进行标签打印的细节，我们要做的是使用CSS绝对定位，绝对定位允许我们通过指定元素的顶部和左侧角落的位置来指示相对于其父元素放置元素的位置。
使用代码
下面是为标签定义的CSS类。
.label <span class="code-none">{
background<span class="code-none">:white<span class="code-none">;
position<span class="code-none">:absolute<span class="code-none">;
border-collapse<span class="code-none">:collapse<span class="code-none">;
width<span class="code-none">:4.00in<span class="code-none">;
height<span class="code-none">:3.33in<span class="code-none">;
margin<span class="code-none">: 0.00in<span class="code-none">;
padding<span class="code-none">: 0<span class="code-none">;
left<span class="code-none">: 0.00in<span class="code-none">;
top<span class="code-none">: 0.00in<span class="code-none">;
border<span class="code-none">:1px solid black<span class="code-none">;
border-style<span class="code-none">:dotted<span class="code-none">;
<span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
我们指定的标签宽度为4英寸，高度为3.33英寸。接下来，我们需要指定一个"纸张"来包含标签，我们可以使用下面的CSS类来定义一个8.5英寸11英寸大小的信纸。
.paper <span class="code-none">{
position<span class="code-none">:relative<span class="code-none">;
margin<span class="code-none">: 0.00in<span class="code-none">;
padding<span class="code-none">: 0<span class="code-none">;
left<span class="code-none">: 0.00in<span class="code-none">;
top<span class="code-none">: 0.00in<span class="code-none">;
width<span class="code-none">: 8.5in<span class="code-none">;
height<span class="code-none">: 11.0in<span class="code-none">;
border<span class="code-none">:1px solid black<span class="code-none">;
border-style<span class="code-none">:dotted<span class="code-none">;
<span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
HTML文件很简单，如下所示：
<divclass="paper">
<divclass="label"style="left:0.00in;top:0.00in;margin-left:0.156in;
margin-top:0.5in">Test Label</div>
<divclass="label"style="left:4.188in;top:0.00in;margin-left:0.156in;
margin-top:0.5in">Test Label</div>
<divclass="label"style="left:0.00in;top:3.33in;margin-left:0.156in;
margin-top:0.5in">Test Label</div>
<divclass="label"style="left:4.188in;top:3.33in;margin-left:0.156in;
margin-top:0.5in">Test Label</div>
<divclass="label"style="left:0.00in;top:6.66in;margin-left:0.156in;
margin-top:0.5in">Test Label</div>
<divclass="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列)标签。
问题
现在测试一下打印，使用Internet Explorer 8或Mozilla 3.0 ，我打印了HTML页面。我使用尺子测量了标签，发现标签比我期望的要小。基本上，诸如Internet Explorer和Mozilla Firefox之类的浏览器现在都带有一个名为"缩小以适合"的选项，以帮助您打印网页。这是我们不希望标签打印的默认行为，
解决办法是什么？
获取最新的打印输出，并使用标尺测量指定标签和实际打印标签的位置差异。从我们HTML的"margin-left"和"margin-top"中扣除数字。调整值，直到打印的标签位于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);
}
}
};