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

分享于 

13分钟阅读

Web开发

  繁體

介绍

本文探讨了使用 JavaScript。HTML和 CSS ( 级联样式表) 进行标签打印。 我们听到的第一个印象是"可能"? 我的打印机上连打印的网页都无法正常打印"。 我们还知道HTML是用来共享数字媒体的信息,比如Internet和HTML都是关于信息可以访问性的。 但是,我还相信浏览器技术在web上的全成熟标签打印软件不使用文档格式如 PDF。SVG或者 XPS。

Background

首先,我们应该对标签真正是什么有基本的概念。 图 below 显示一个简单的3 x 标签。

labelsoftware.png

我们经常使用 比如 打印地址标签,标签仓库项目或者标签产品。 通常,诸如产品 NAME 或者ID之类的信息会在每个标签上打印。 有时,可变数据也会打印在标签上,比如 在邮件列表中显示不同的地址。 微软Word还使用了邮件合并功能,使用微软Word和Excel实现标签打印。 许多知名的供应商也提供了预先设计的模板,可以在微软Word或者定制标签软件中工作。

有了这种基本的理解,让我们深入研究使用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英寸。 我们还指定了"带点"边框以便我们可以轻松看到标签的轮廓。 在我们的HTML文件中,我们将使用label类 上面,通过重写CSS类中的"左边"和"顶端"字段为每个标签指定绝对位置。

接下来,我们需要指定一个"纸张"来包含我们的标签。 我们可以使用以下CSS类来定义一个大小为1 英寸的大小为 8.5英寸的信纸。


.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文件很简单,它看起来如下所示:


<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>



我们指定每个标签的"左边"。"顶端"。"margin-left"和"margin-top"字段,以设置 6个( 3行x 2列) 标签。

这看起来并不困难。 稍加修改,我们就可以实现不同尺寸的标签了。 如果我们使用一些JavaScript编程,我们应该能够满足几乎所有的标签组合。 我们甚至可以设计一个WYSIWYG标签,并在标签中传播不同的内容。

这些问题

现在我们来测试一下。 使用 IE 8或者 Mozilla +,我打印了我的HTML页面。 我用尺子测量了标签,发现标签比我预期的要小。 怎么了?

基本上,像 IE 和 Mozilla Firefox 这样的浏览器现在有一个叫做"缩小以适应"的选项来帮助你打印网页。 这是一个默认行为,我们不希望标签打印。 如果你使用的是 IE,请取消选中"页面设置"中的"启用 Shrink-to-Fit"选项。 如果你使用的是 Mozilla,请取消选中"打印选项"中的"缩小以适应页面宽度"选项。

我们再打印一次,尺寸是正确的。 但是标签的位置不正确。 它看起来向右和向下移动。 那么现在有什么问题?

问题是打印机页边距。

转到 Internet Explorer-> Printer-> 页面设置,或者 Mozilla-> File-> 页面设置,或者 Opera> File-打印选项。

在 margin 设置中,将以下页边距设置为零。

左:0,右:0,顶部:0,Bottom:0

有时 IE 不允许输入零 margin,如果是这样,使用浏览器提供的最小 margin。 对于 Mozilla,margin 设置位于"边距 & header/footer"选项卡中。

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

现在更好了,但标签仍然被移动,而不是在正确的位置。 这是当前阻止我们使用网络技术执行标签打印的基本问题之一。 但是,我们可以通过对HTML进行一些修改来克服这个问题。

解决办法是什么呢

获取最新的打印,并使用标尺测量指定标签位置和实际打印位置之间的差异。 从"margin-left"中的和"margin-top"中扣除数字。 调整值直到打印的标签位于HTML中指定的位置。

使用HTML进行标签打印的基础

描述 上面 向我们展示了如何通过对页边距进行调整来使用HTML打印标签。 我们可以把这个过程看作是对网络上标签软件的某种校准。

在校准过程中,用户将能够打印出一个HTML页面,该页面在纸张的特定位置上。 指定的行的实际位置的差异将为我们需要校准的值。 例如,如果在纸张的左侧,从纸张左侧的4.25英寸打印一条垂直线。 打印这条线时,实际上从纸的左边打印出 4.5英寸。 然后,需要调整 -0.25英寸的差异,以便我们的打印布局。 我们利用CSS页边距来调整我们的网页打印。

校准值也可以存储在一个持久存储中( 比如。 文本文件),并且该值将在下次自动加载。 因此,用户只校准一次,并且可以在以后正确地使用HTML打印标签。 这里过程类似于一次设置打印机并使用它进行打印。

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

JavaScript和jQuery代码 below 展示了如何使用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);


 }


 }


};



Points of Interest

在Mac上,IE 7 ( 然后),Mozilla,Safari 5,Opera 以及即将出现的Google Chrome 6所有支持页面设置,并禁用收缩选项的Page。 我们相信主要的浏览器聚合以支持一组通用的打印功能。 这些浏览器在 CSS3。本地存储。画布和许多有趣的功能的支持下,也在向 HTML5. 使用 HTML。CSS和JavaScript进行标签打印在不久的将来绝对是可能的。

开源项目

如果你喜欢阅读,你可能会对我们的开放源码项目 labelgrid标签软件感兴趣。 在这个项目中,我们尝试建立一个完全成熟的标签打印软件,基于web的开放技术。 我们相信浏览器技术收敛到在 web ( 不使用像 PDF。SVG或者XPS这样的文档格式) 上完全成熟的标签打印软件。 使用HTML作为 Backbone 还允许我们轻松地将labelgrid移植到即将使用的移动平台,而第三方 Plug-Ins 可能不。

历史记录

  • 29th 2010年06月: CodeProject的初始发布

相关文章