从网页打印条形码标签 [英] Printing barcode labels from a web page

问题描述

我正在开发一个 ASP.Net Web 应用程序，该应用程序必须在标准 Avery 样式标签纸(一种特定尺寸，因此只有一种整体布局)上打印动态创建的标签.标签的行数可变 (3-6)，可能包含文本行或图形条形码图像.

I am working on an ASP.Net web application that must print dynamically created labels on standard Avery-style label sheets (one particular size, so only one overall layout). The labels have a variable number of lines (3-6) and may contain either lines of text or a graphic barcode image.

我继承的第一个剪裁使用等宽字体来减少格式问题，但这并没有让足够的文本适合标签，因此客户不满意.基本上是格式化文本.

Our first cut, that I inherited, used monospaced fonts to reduce the formatting issues, but that did not allow enough text to the fit on the labels and the customer was dissatisfied. Basically it was formatted text.

我的下一个版本使用了表格、DIV、CSS 和一些 JavaScript 计算来使用比例字体来格式化标签.它仍然需要一些调整(用户必须正确设置他们的打印边距并关闭打印页眉和页脚)，但它似乎有效.

My next version used TABLEs, DIVs, CSS, and a bit of JavaScript calculations to format the labels using proportional fonts. It still required a bit of tweaking (the user had to set their print margins correctly and turn off the print headers and footers), but it seemed to work.

然而，似乎不同的打印机在呈现文本的方式上存在一些差异(WYS 不是 WYG)，所以即使我们使用至少两种不同的打印机(喷墨打印机和激光打印机)在不同的浏览器上进行了测试，一些用户的标签不对齐.可以通过调整页面设置对话框中的边距来调整轻微的边距变化，但更难的问题是标签间的间距可能会偏离一英寸的一小部分，因此如果第一个标签很好地居中，通过标签文本和图像从标签顶部或底部爬出的页面末尾.

However, it seems that there are some variations on how different printers render the text (WYS ain't WYG), so even though we tested on different browsers using at least two different printers (an inkjet and a laser printer), some user's labels don't line up. Slight margin variations can be adjusted by adjusting the margins on the page setup dialog, but the harder problem is that the inter-label spacing can be off by a tiny fraction of an inch, so that if the first label is pretty well centered, by the end of the page the label text and images have crawled off the top or bottom of the labels.

我们即将切换到生成 Word、Excel 或 PDF 输出，这将需要相当多的开发时间，并且可能会在打印过程中添加额外的步骤.

We are about to the point of switching to generating Word, Excel, or PDF output which is going to take quite a bit of development time and possible add extra steps in the printing process.

那么，有没有人对如何制作可以在不同类型的打印机上精确呈现的 HTML/CSS 布局有任何建议?我真的不在乎换行符/分词符是否有一点不同，但我需要能够可预测地定位每个标签区域的左上角.

So, does anyone have any suggestions on how to do an HTML/CSS layout that will precisely render on different types of printers? I don't really care if the line/word breaks are a bit different, but I need to be able to predictably position the upper left corners of each label area.

现在标签在表格中沿着页面向下流动，我们一直在调整单元格和内部 DIV 的框模型，使它们具有统一的高度.我怀疑使用每个元素的绝对定位可能是最好的答案，但由于标签元素的 ASP.Net 生成，这也会很棘手.如果我确定这会奏效，我宁愿尝试它，也不愿扔掉我们必须采用的所有生成方法.

Right now the labels flow down the page in a table and we have been tweaking the box model of the cells and internal DIVs to make them a uniform height. I suspect that using absolute positioning of each element may be the best answer, but that is going to be tricky as well due to the ASP.Net generation of the label elements. If I knew for sure that would work, I would rather try it than throw away everything we have to go to a different generation method.

轻微更新:现在我正在做一些绝对定位的测试——只设置包含块元素的顶部和左侧坐标.到目前为止，页面上的偏移量(边距、纸张对齐等)存在细微差异，但所有经过测试的浏览器和打印机都将元素完全放在了正确的位置彼此相对.我很欣赏 PDF 提示，但有人知道以这种方式使用绝对定位的其他陷阱"吗?

Slight Update: Right now I'm doing some tests with absolute positioning - setting only the top and left coordinate of a containing block element. So far there are minor variations on the offset onto the page (margins, paper alignment, etc.), but all browsers and printers tested put the elements in exactly the right spots relative to each other. I appreciate the PDF tips, but does anyone know of additional "gotchas" on using absolute positioning this way?

更新:为了记录起见，我使用 iTextSharp 重写了标签打印部分，它运行良好 - 绝对是将来这样做的方式......

Update: For the record, I rewrote the label printing portion using iTextSharp and it works perfectly - definitely the way to do this in the future...

推荐答案

忘记 HTML 并制作 PDF.HTML 打印变化极大——不仅跨浏览器而且跨同一浏览器的不同版本.PDF 容易多了.

Forget HTML and make a PDF. HTML printing is extremely variable - not just across browsers but across different versions of the same browser. PDF is a lot easier.

即使您使用一个浏览器/字体设置/打印机/月相就完全正确，它也将是您必须维护的最脆弱的东西.无论您认为制作 PDF 需要多长时间(而且实际上并没有那么难，因为有一些免费库)，HTML 最终会花费您更多的时间.PDF 阅读器被广泛部署，打印的一致性甚至比 Word 文件还要高.

Even if you get it exactly right with one browser / font setup / printer / phase of the moon, it will be the most fragile thing you've ever had to maintain. No matter how long you think it will take to make a PDF (and it's not really that hard as there are some free libraries out there), HTML will ultimately take a lot more of your time. PDF readers are widely deployed and print more consistently than even Word files.

这篇关于从网页打印条形码标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！