使用 CSS 创建页眉和页脚进行打印 [英] Creating page headers and footers using CSS for print

问题描述

我正在使用 Flying Saucer 创建 PDF(将 CSS/HTML 转储到 iText 到 PDF)，并且我正在尝试使用 CSS3 将图像页眉和页脚应用于每个页面.

我基本上想把这个 div 放在每个页面的左上角:

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

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

@page {尺寸:8.5 英寸 11 英寸；边距:0.5in；@左上方 {内容:你好"；}}

有没有办法把这个 div 放在 content 中?

解决方案

在每页顶部放置一个元素:

@page {@top-center {内容:元素(页眉)；}}#pageHeader{位置:运行(页眉)；}

参见 http://www.w3.org/TR/css3-gcpm/#running-elements(适用于飞碟)

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.

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>

My CSS looks somewhat like this:

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

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

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);
}

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

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