使用飞碟，我如何生成一个pdf与页编号和页总数在页脚上的每个页?

It took me a little more research than I would have liked to figure this out on my own, so I'm going to post a comprehensive answer here. It seems like the information to do this is spread across many different websites and I'd like to put it in one place. This answer may be the same thing, but my eyes glaze over because it's in a Java string and not in a html template. Here's the question:

我花了比我自己想要的更多一点的研究，所以我将在这里发布一个全面的答案。看起来这样做的信息分布在很多不同的网站上，我想把它放在一个地方。这个答案可能是一样的，但我的眼睛却呆滞了，因为它是在Java字符串中，而不是在html模板中。这是一个问题:

I'm rendering a PDF and I want a footer at the bottom of the page that says, "Page n of m" where "n" is the page number you're on and "m" is the total pages in the document. How do I do that?

我正在呈现一个PDF，我想在页面底部有一个页脚，上面写着“第n页(m)”，其中“n”是你所在的页码，“m”是文档中的全部页码。我该怎么做呢?

3 个解决方案

#1

In your html, you need to put this somewhere in the body tag:

在html中，你需要把它放到body标签中:

<div id="footer">
    page <span id="pagenumber"></span> of <span id="pagecount"></span>
</div>

And this should be your css/style:

这应该是你的css/样式:

    #footer {
        position: running(footer);
        text-align: right;
    }

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

    #pagenumber:before {
        content: counter(page);
    }

    #pagecount:before {
        content: counter(pages);
    }

You can learn more about that @bottom-right option here.

您可以在这里了解更多关于这个@底部的选项。

#2

You could also try a slightly more succinct approach:

你也可以尝试更简洁的方法:

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

You need to put this in your css/style, and you do not need to add an extra footer HTML element.

您需要将其放入您的css/style中，并且不需要添加额外的页脚HTML元素。

#3

@John Mark 's solution worked for me. In my application I needed to embed the style info in the HTML, so I wrapped this in <style> tags and put it inside the <head> before <title>. Maybe that info will be useful to someone else.

@John Mark的解决方案对我很有效。在我的应用程序中，我需要在HTML中嵌入样式信息，所以我将它封装在

#1