Pdf 使用CSS打印创建页眉和页脚_Pdf_Pdf Generation_Flying Saucer_Css Paged Media

Pdf 使用CSS打印创建页眉和页脚

pdf

Pdf 使用CSS打印创建页眉和页脚,pdf,pdf-generation,flying-saucer,css-paged-media,Pdf,Pdf Generation,Flying Saucer,Css Paged Media,我正在使用flyingdiscer创建一个PDF（它将CSS/HTML转储到iText到一个PDF），并尝试使用CSS3将图像页眉和页脚应用到每个页面我基本上想把这个div放在每页的左上角： <div id="pageHeader"> <img src="..." width="250" height="25"/> </div> @page { @top-center { content: element(pageHeader);

我正在使用flyingdiscer创建一个PDF（它将CSS/HTML转储到iText到一个PDF），并尝试使用CSS3将图像页眉和页脚应用到每个页面

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

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

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

有没有办法把这个div放到

内容中
 在每页顶部放置一个元素：
<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

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

请参阅（在飞碟中工作）
以在页面上包含页眉和页脚（详细说明@Adam的优秀答案）：

@页面{
利润率：100px 25px；
大小：字母肖像；
@左上角{
内容：元素（页眉）；
}
@左下角{
内容：元素（页脚）；
}
}
#页眉{
位置：运行（页眉）；
}
#页脚{
位置：正在运行（页脚）；
}
从上面来的东西
潜伏在下面
有意义的漫谈。。。

注意：为了让页脚在每页上重复，可能需要在其他正文内容（多页内容）之前定义页脚。我使用它从HTML创建PDF。您将在不重叠页面内容的情况下将页眉和页脚固定到每个页面。试试看：
CSS
<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Page: " counter(page);
  }

</style>


@页面{
边缘：10mm；
}
身体{
字体：9pt无衬线；
线高：1.3；
/*避免固定页眉和页脚重叠页面内容*/
边缘顶部：100px；
边缘底部：50px；
}
#标题{
位置：固定；
排名：0；
宽度：100%；
高度：100px；
/*用于测试*/
背景：黄色；
不透明度：0.5；
}
#页脚{
位置：固定；
底部：0；
宽度：100%；
高度：50px；
字号：6pt；
颜色：#777；
/*用于测试*/
背景：红色；
不透明度：0.5；
}
/*打印渐进式页码*/
.页码：之前{
/*计数器增量：第页*/
内容：“页面：”计数器（第页）；
}

HTML
<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>


标题
页脚
这是你的长内容。。。
此文本不会在页面之间断开
Wow，要是我早点知道就好了，我一直在努力用不太完整的方式拍摄背景图像。非常感谢！我试图采用这种方式，但由于某些原因，在Chrome中，页眉只打印在第一页上，页脚只打印在最后一页上。在Firefox中，这是完全失败的。它在Firefox或Chrome中工作吗？我两个都试过了，但对我来说都不起作用：/@Jaro这个问题是关于使用飞碟生成PDF的。如果你想在Firefox/Chrome中得到同样的答案，那么如果你问了一个新问题，你会有更高的机会得到答案。适用于所有主流浏览器。试试看！截至2020年1月，Firefox仅支持content:element（…）
功能，而Chrome/Webkit/Edge.THX不支持该功能！在其他元素之前添加页脚元素有助于解决我的问题。哦，哇，这真是太棒了！我没想到Chrome会重印position:fixed每个打印页面中的元素-但它确实存在！：D不幸的是，页面编号不起作用，但我不需要页面编号我现在正在做的工作。这很好-不清楚.page number项在哪里起作用。