Javascript窗口打印页脚只打印页码

Question

在javascript window.print 函数中，如何去除页脚中的url 但仍然包含页码？这是我的结果页面。 我希望 url 消失但页码保持不变，无论如何我可以实现吗？似乎这段代码不起作用。

<style type="text/css" media="print">
@page {
    size: landscape; margin:0 0 10mm 0 ;float: none !important;
}

a {
   display: none;
}

Answer 1

您可以使用 CSS 轻松实现这一目标。对于这个答案，我们没有使用@page，这是一个纯 CSS 答案，但在 FireFox 20+ 版本中工作。这是示例的链接。

CSS 是:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML代码是:

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

这样您就可以通过编辑#pageFooter 的参数来自定义您的页码。

我的例子:

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20px;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

希望这个技巧能帮到你。

总页数

你可以用这个

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