【发布时间】：2019-09-12 21:19:54
【问题描述】：
您好，我使用 CSS3 page media module 直接从浏览器将 html 内容打印到 PDF，但我没有使用任何浏览器来处理它。我的工作在下面。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@media print {
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "sans-serif";
position: relative;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
@page {
size: letter;
margin: 20mm 25mm;
}
@page {
@top-center {
content: element(pageHeader);
}
}
@page {
@bottom-center {
content: element(pageFooter);
}
}
#pageHeader {
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
}
</style>
</head>
<body>
<div id="pageHeader">
<p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
<p>This is the footer shown on last page.</p>
</div>
<section class="page">
<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>
<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>
</section>
</body>
</html>
它不适用于我的任何浏览器。我已经在最新的 Chrome、FF、Opera、Safari 中对其进行了测试。它应该在每一页上显示页眉和页脚。页眉旨在显示在每个页面的顶部，而页脚则显示在每个页面的底部。任何人都可以有实际工作的 CSS3 页面媒体模块元素的工作示例。此外，我不是在寻找绝对位置或页眉和页脚的固定解决方案。我试过了，除了单页外，它不起作用。我已经为这个问题缩短了我的文本内容，但它可以被复制和过去以生成多页文档以查看没有页眉和页脚的多个页面。页眉和页脚 div 保持在顶部。
【问题讨论】：
-
我想要这个。 :] 我正在寻找此功能支持。
标签： html css printing-web-page css-paged-media css-gcpm