您好，我已经使用CSS3 页面媒体模块直接从浏览器将 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 保持在顶部。