相关疑难解决方法(0)

打印html时在页面上打印页码

我已经阅读了很多关于打印页码的网站,但是当我尝试打印时,我还是无法显示我的html页面.
所以CSS代码是下一个:

@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
Run Code Online (Sandbox Code Playgroud)

我试过把这个页面规则放在里面

@media all {
    *CSS code*
}
Run Code Online (Sandbox Code Playgroud)

在它之外,试图把它放进去@media print,但没有任何帮助我在我的页面上显示页码.我试过使用FireFox和Chrome(如你所知,基于WebKit).我认为问题出在我的html或css代码中.
有人能告诉我一个@page在几个页面的大html页面中实现这个规则的例子吗?我只需要html页面的代码和css文件的代码,这是有效的.
PS我有最新支持的浏览器版本.

html css printing-web-page

59
推荐指数
4
解决办法
14万
查看次数

浏览器支持CSS页码

所以我知道这个选项:带有CSS/HTML的页码.

到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本?

我试过制作一个空白的html文件,并在头部添加两个样式标签:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}
Run Code Online (Sandbox Code Playgroud)

我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方?通过'this',我特别指的是@page@bottom-right标签,因为我已经有很多次内容工作了.

css printing cross-browser css-paged-media

38
推荐指数
3
解决办法
5万
查看次数

@media print的CSS页面x

我会先说这个问题,我之前已经问过这个问题,但我能找到的所有答案似乎都引用了一个不再有效的过时解决方案(至少在Firefox 56 [64位]中)

过时的方法是曾经有一个自动实例化的CSS计数器命名pages,所以从这个SASS生成一小段CSS:

footer {
    position: fixed;
    bottom: 0;
    left: 20px;

    &:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
}
Run Code Online (Sandbox Code Playgroud)

习惯做我想做的事.现在它显示"Page [x]为0".

我已经尝试使用这个CSS来重新创建我自己的max-page计数器:

@page {
    counter-increment: maxpage;
}
Run Code Online (Sandbox Code Playgroud)

但是,当在我的页脚中使用时,这也会返回0.

是否有任何合理的跨浏览器友好方式来获得此功能?

html css printing

6
推荐指数
1
解决办法
5511
查看次数

如何在@media print中使用页码进行打印?

我已经寻找这个答案有一段时间了,但找不到任何可以正常工作的东西。我有这两个想法,看起来在很长一段时间内根本行不通:

  1. @page一种使用with 的方法bottom-right关联

  2. 使用固定页脚的方法。(据说可以在 Firefox 中使用)链接

还有其他办法吗?

html css printing jquery pagination

4
推荐指数
1
解决办法
2万
查看次数