CSS3页面媒体无法在任何浏览器中使用

Question

Hello I have used CSS3 page media module to print html content to PDF directly from browser but I am not getting any browser to work it on. 您好，我使用CSS3页面媒体模块直接从浏览器将html内容打印为PDF，但没有任何浏览器可对其进行处理。 My working is below. 我的工作在下面。

<!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>

It does not work in any browser for me. 对我来说，它不能在任何浏览器中使用。 I have tested it in latest Chrome, FF, Opera, Safari. 我已经在最新的Chrome，FF，Opera，Safari中对其进行了测试。 It should show the header and footer on every page. 它应该在每页上显示页眉和页脚。 The header is intended to be shown on top of every page and footer at the bottom of every page. 页眉应显示在每页顶部，页脚应显示在每页底部。 Can any one have working example of CSS3 page media module elements that actually works. 任何人都可以拥有实际工作的CSS3页面媒体模块元素的工作示例。 Also I am not looking for position absolute or fixed solution of header and footer. 我也不在寻找绝对位置或页眉和页脚的固定解决方案。 I have tried it and it does not work except for single page. 我已经尝试过了，除了单页之外它不起作用。 I have shorten my text content for this question but it can be copy and past to produce multiple page document to see multiple pages without header and footer. 我已经缩短了该问题的文本内容，但是可以复制并生成多页文档，以查看没有页眉和页脚的多个页面。 The header and footer div stays at top. 页眉和页脚div停留在顶部。

Answer 1

It's not currently supported in any of the end-user browsers, but it is supported in PrinceXML, a dedicated engine for generating PDFs. 目前，任何最终用户浏览器均不支持此功能，但PrinceXML（用于生成PDF的专用引擎）支持此功能。 See the CSS3 support for Margin boxes . 请参见CSS3对Margin框的支持。

PrinceXML is a commercial product, but I use it for creating the print version of novels from a HTML source. PrinceXML是一种商业产品，但是我使用它来从HTML来源创建小说的印刷版本。 It supports a comprehensive list of printing-related features. 它支持与打印相关的功能的完整列表。 (I am not affiliated with them in any way.) （我与他们没有任何关系。）

Answer 2

Could it be because that specification is from a W3C working draft rather than an actual implementation, so there are no browsers yet that implement this proposed spec? 可能是因为该规范来自W3C工作草案，而不是实际的实现，所以还没有浏览器实现此建议的规范？ In fact, it isn't even proposed quite yet - it is being discussed as a "working draft", meaning it is open for discussion and hasn't even made it into an "editor's draft". 实际上，它甚至还没有提出来-正在作为“工作草案”进行讨论，这意味着它可以进行讨论，甚至还没有成为“编辑者的草案”。 From there it could still be a while before you see it available in a browser. 从那里可能还需要一段时间才能在浏览器中看到它。 That working draft has a relatively recent date on it as well - May 13, 2014 - so beware of implementing any of that proposal for a while. 该工作草案的日期也相对较新-2014年5月13日-因此请注意暂时不要执行该建议。 That said, this does look like a handy addition. 也就是说，这看起来确实很方便。

For now, what about using the CSS pseudo element 'before', or 'after' along with a tag in that header position? 现在，将CSS伪元素“ before”或“ after”与该标头位置的标记一起使用会怎样？

Here is a good description of the differences between working draft and editors draft: What is the difference between a W3C Working Draft and an Editor's Draft? 这是对工作草稿和编辑草稿之间区别的很好描述： W3C工作草稿和编辑草稿之间有什么区别？

CSS3页面媒体无法在任何浏览器中使用

问题描述

2 个解决方案

解决方案1
3 2014-08-22 23:29:26

解决方案2
1 2014-08-22 21:44:30

CSS3页面媒体无法在任何浏览器中使用

问题描述

2 个解决方案

解决方案1 3 2014-08-22 23:29:26

解决方案2 1 2014-08-22 21:44:30

解决方案1
3 2014-08-22 23:29:26

解决方案2
1 2014-08-22 21:44:30