要在8.5x11纸张上打印HTML吗？

Question

我想在8.5x11张纸上打印数据集(每张纸一套)。这些集合一个接一个地垂直呈现在网页上(在大小为8.5x11的div中)。

如何在一张8.5x11的纸张上以相同的格式打印这些div？

Answer 1

您可以执行以下操作：

1. 尝试计算您可以在一页上打印的<div>的大致高度。这由<div>的内容决定，并不完全由您控制(即，如果数据主要是文本，用户可以选择覆盖您的字体大小或缩放页面以进行打印)。但是，您应该能够得出适合的大致高度。对于12pt字体，我发现它的高度约为900px。
2. 创建了一个.page类，它在print stylesheet中使用CSS printing page break规则。它们允许您向浏览器建议分页符应该出现在元素之前还是之后。

您将得到类似以下内容的结果：

HTML

<div class="page">
    /* data */
</div>
<div class="page">
    /* more exciting data */
</div>

CSS

.page {
    font-size: 12pt; 
    height: 900px;  /* You'll need to play with this value */
    page-break-after: always; /* Always insert page break after this element */
    page-break-inside: avoid; /* Please don't break my page content up browser */
}

为了获得更多的阅读，this ALA article给出了一些关于打印网页的很好的建议。

但是，如果您希望精确控制报表的打印方式，我建议您生成一个PDF并将其提供给用户。