Question

您好我已经使用CSS3页面媒体模块http://www.w3.org/TR/css-gcpm-3/直接从浏览器将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保持在顶部。

Answer 1

目前任何最终用户浏览器都不支持它，但PrinceXML支持它，这是一个用于生成PDF的专用引擎。请参阅the CSS3 support for Margin boxes。

PrinceXML是商业产品，但我用它来创建HTML源的小说的印刷版本。它支持与打印相关的功能的完整列表。（我不以任何方式与他们有任何关系。）

Answer 2

可能是因为该规范来自W3C工作草案而不是实际实现，所以还没有实现此提议规范的浏览器？事实上，它甚至还没有提出 - 它正在被讨论为“工作草案”，这意味着它可以讨论，甚至没有成为“编辑草案”。从那里开始，您可能还需要一段时间才能在浏览器中看到它。该工作草案也有一个相对较新的日期 - 2014年5月13日 - 因此请注意暂时执行该提案中的任何一项。也就是说，这确实看起来像是一个方便的补充。

现在，使用CSS伪元素'之前'或'之后'以及该标题位置中的标记怎么样？

以下是对工作草案和编辑草稿之间差异的一个很好的描述： What is the difference between a W3C Working Draft and an Editor's Draft?

css3页面媒体无法在任何浏览器中运行

2 个答案: