javascript web打印。在每页的页眉中打印一个徽标

Question

我的问题是打印时我不知道它有多少页。我使用了以下CSS：

@media print {
    .barcode{
        position: fixed;
    }
}

以便在打印时图像显示在每一页中。但在第二页或第三页上，图像将与页面内容重叠为屏幕截图。

​

Answer 1

您可以尝试如下所示：

HTML

<div class='barcode'><!-- Barcode content --></div>

CSS

.barcode { display:none; }

@media print {
  .barcode  { display: block; position: fixed; top: -20px; height: 50px; }
}

div需要固定位置才能显示在每个打印页上。您可以尝试调整top属性以将其定位并移动到内容上方。

Answer 2

在重新考虑这一点之后，一个更好的解决方案是生成用于打印的PDF版本的页面。然后你会有更多的控制权。有许多适用于所有服务器语言的PDF库。

Answer 3

这是不可能直接控制的。您可以尝试做的是定期强制分页符，并对间隔div应用高度。例如：

@media all
{
  div.page-break  { display:none; }
}

@media print
{
  div.page-break  { display:block; height: 100px; page-break-before:always; }
}

但是，只有在页面中放置了足够多的<div class="page-break"></div>，以便在每个自然分页符出现之前出现一个，这才能起作用。

参考：http://davidwalsh.name/css-page-breaks