Question

是否有一种技术可以在打印时在每页底部添加文本页脚？例如“Copyright My Company 2010” - 我知道可能有一种方法可以使用CSS对背景图像进行此操作，但我真的想在此部分使用文本，以便客户端可以编辑它。有什么想法吗？

Answer 1

CSS没有页面媒体的任何概念，因此无法保证页面中断的位置会自然发生。

EDIT 正如下面所指出的，CSS 2.1确实引入了@page作为处理分页媒体的方法，但它在常见的浏览器中是never implemented。所以，正如我上面所写，它不存在，虽然这在技术上并不正确。

您可以设置硬分页符，例如在大致位置放置<div class="page-break">。然后，您可以使用page-break-before:always设置样式以确保在那里发生中断。

还有一个page-break-after属性;但是你不知道元素开始向下走了多远。因此，当您需要定位它时，您唯一可以使用的是position:absolute;bottom:0，它不会将其修复到页面媒体，而是整个文档的底部。

如果您使用page-break-before，则您知道它始终显示在页面顶部。然后，您可以使用position:absolute而无需提供top或bottom，这样只会将其从文档流中删除。然后，给它一个720pt（10英寸）的高度意味着你有一个底边可以定位内容。

以下是我将如何处理它：

/* hide the page footer on screen display */
.page-break { display: none; }

@media print {
  /* make a 10-inch high block that sits on top of the page content */
  .page-break {
    page-break-before: always;
    display: block;
    position: absolute;
    height: 720pt;
  }

  /* stick the contents of .page-break to the bottom of the 10 inch block */
  .page-break .copyright {
    position: absolute;
    bottom: 0px;
  }
}

但是，我不知道浏览器在现实中实际上是如何支持这一点的。我记得有一段时间玩过分页符，最后放弃了，因为我无法让它们足够可靠地工作。我怀疑它仍然是不可能或非常黑客和不可靠。

Answer 2

CSS分页媒体模块3级W3C工作草案包含一个在边距内打印的方法。

尝试使用此代码，但它可能尚未得到广泛支持。

@page {
     margin: 2cm; 2cm; 2cm; 2cm;
     @bottom-center { content: "Copyright My Company 2010" }
     @top-right { content: counter(page) }
}

打印网页时，在每个打印页面的底部添加文本页脚

2 个答案: