打印到纸质表格答案

【问题标题】：Printing to a paper form打印到纸质表格
【发布时间】：2010-10-25 17:28:32
【问题描述】：

我正在考虑使用打印样式表来填写预先打印的纸质表格。所以假设你有一张看起来像这样的纸：

Name: ________________________
Address: _____________________
City: ________________________
State: _______________________
Zip: _________________________
Favorite ice cream: __________

我希望我的网页（带有打印样式表）如下所示：

        John Smith
            1 Main St
          Springfield
           MA
          01002

当用户打印页面时，信息将填写纸质表单，如下所示：

Name: ___John Smith___________
Address: ___1 Main St_________
City: ___Springfield__________
State: ____MA_________________
Zip: ______01002______________
Favorite ice cream: __________

我们之所以考虑这样做，是因为我们已经有大量的彩色纸质表格，我们只想在可能的情况下预先填写。我们可能没有所有信息（在上面的示例中，我们没有关于他们最喜欢的冰淇淋的信息）。因此，我们希望我们提供表单的人能够验证我们拥有的信息并添加任何缺失的信息。

有没有人使用打印样式表做到这一点？我只是自找麻烦吗？我真的应该在浏览器中复制整个表单（问题+答案）并将其全部打印在一张白纸上吗？谢谢！

【问题讨论】：

标签： css printing

【解决方案1】：

如果您对使用 DIV 的绝对定位感到满意，您可以利用 CSS 对打印样式表中以厘米为单位指定的顶部、左侧、右侧、底部、宽度和高度的支持。

即：

div.name { position:absolute; top:1cm; left:3cm; width:4cm; height:0.7cm; }
div.address1 { position:absolute; top:1.9cm; left:3cm; width:4cm; height:0.7cm; }

您只需要测量您的表单，然后将所有 DIV 设置为现有表单上的行所在的位置。

当我自己尝试这样做时，我只是设置了一个嵌套无序列表的网格，以标记一个 5 毫米乘 5 毫米的网格，以帮助确定打印页面上的初始对齐，然后用尺子测量尺寸用于每个元素。哦，您需要将页面（或 div 包装器）设置为相对位置。

编辑 - 您可能还希望设置 div 以将任何溢出设置为隐藏，这样您就不会将任何长线环绕到另一个字段中。

【讨论】：

【解决方案2】：

大卫，

你想做的事情肯定比从头打印表单更繁琐，但显然你不想浪费你已经拥有的打印资源是可以理解的。

960 网格系统 (http://960.gs) 在布置网站时相当流行，尽管您对它的使用不一定完全符合它的用途，但我认为它会有所帮助。您可以从here下载所有960网格系统资源。

下载资源后，您会想要找到草图文件的 PDF 版本。您可以将其覆盖在您的打印表单上（透明有助于此处），并确定如何布局您的网页以匹配您想要的位置。

之后，您可以使用资源文件夹中的 960 网格系统演示代码来开始布局。

希望能有所帮助

【讨论】：

【解决方案3】：

猜你是在自找麻烦，但使用可用资源是对的。

在这种情况下，向上或向下几个像素/点可能会使您的打印变得一团糟......使用 CSS 可能会非常困难（它具有像素精度，但它不是面向页面的，不要' t 有页边距控制等）。如果我必须这样做（是的，这会很乏味），我会使用一些像素精度报告生成器（如Jasper）并仔细对齐字段。

【讨论】：

【解决方案4】：

我不明白为什么通过反复试验无法做到这一点。正如@Richard 所说，您可以将cm 用于单位。是的，这会很乏味，但我相信这是可以做到的。特别是因为它只需要适用于一种特定的表单布局，您可以尝试使用它。

【讨论】：