Question

我一直在玩飞碟R8并尝试 隐藏我的PDF首页 的页眉和页脚。

我跟着hint尝试遵循我的print.css中 content：element（） (W3C running elements)的W3C规范。据描述，以下内容应解决我的问题：

@page { @top-center { content: element(header, first-except) }}

但似乎这还没有在R8中实现。所以我尝试使用 set-string 方法进行上述方法。

#header { set-string: header content() }
@page { @top-center { content: string(header, first-except) }}

但是没有任何东西被渲染，内容：字符串（）似乎被打破了，因为我放在那里的任何东西都不会被渲染：

@page { @top-center { content: "foo" string(header, first-except) }} /*broken*/
@page { @top-center { content: "foo" string(header) }} /*broken*/
@page { @top-center { content: "foo" }} /*works!*/

所以有人知道如何让这个工作吗？

Answer 1

好的，洗液很容易。我从飞碟手册来源link

复制了它

我必须做以下事情：

添加第二个没有页码的页脚：

<div id="normalFooter" style="position: running(normalFooter);">
    <div class="footerContent">fancy stuff</div>
    page <span class="page"/> of <span class="pagecount"/> 
</div>
<div id="firstPageFooter" style="position: running(firstPageFooter);">
    <div class="footerContent">fancy stuff</div>
</div>

诀窍是CSS @page：first ：

@page {     
    @bottom-right {
        content: element(normalFooter);
    }
} 

@page :first {      
    @bottom-right {
        content: element(firstPageFooter);
    }
}

除了第一个页面之外，所有页面都有一个普通的页脚，它有不同的页脚。

Answer 2

这似乎对我有用。我最初错过的关键是#cover元素上的字符串设置属性。它还显示了如何进行页面计数器。 #cover元素在我的封面上，导致第一页的计数器递增，即使页脚没有显示。

        div.header {
            display: block;
            font-size: 8pt;
            position: running(header);
        }

        div.header .project-date {
            padding-left: 8px;
        }

        div.header .project-name {
            padding-left: 4px;
        }

        div.footer {
            font-size: 8pt;
            display: block;
            position: running(footer);
        }

        div.footer .page-number:before {
            counter-increment: section;
            content: counter(section);
        }


        @page {
            size: 8.5in 11in;
            margin: 1cm;
            @top-center { content: element(header, last-except)}

            @bottom-center { content: element(footer, last-except)}

        }

        #cover {
            string-set: footer header;
            counter-increment: section;
        }

Flying Saucer在页面上隐藏页眉和页脚

2 个答案: