使用CSS创建页眉和页脚以进行打印

本文介绍了使用CSS创建页眉和页脚以进行打印的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Flying Saucer（将CSS / HTML转换为iText为PDF格式）创建PDF，我试图使用CSS3将图像页眉和页脚应用到每个页面。

I'm creating a PDF using Flying Saucer (which dumps out CSS/HTML to iText to a PDF) and I'm trying to use CSS3 to apply an image header and footer to each page.

我实际上想把这个div放在每一页的左上角：

I'd essentially like to put this div in the top left of each page:

<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

我的CSS看起来有点像这样：

My CSS looks somewhat like this:

@page {
    size: 8.5in 11in;
    margin: 0.5in;

    @top-left {
        content: "Hello";
    }
}

有没有办法让我把这个div content ？

Is there a way for me to put this div in the content?

推荐答案

将元素放置在每个页面的顶部：

Putting an element to the top of each page:

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

请参阅（在Flying Saucer中使用）

See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)

这篇关于使用CSS创建页眉和页脚以进行打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！