Chrome 2023年有没有办法用简单的CSS在HTML页面上打印页码

55ooxyrt  于 2023-06-19  发布在  Go
关注(0)|答案(1)|浏览(301)

我试图打印HTML页面上的页码,但没有任何东西为我工作。我已经用过这些代码了

    • 第一个密码在这里**
#content {
    display: table;
}

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

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
    • 第二密码在这里**
@page {
  @bottom-left {
    content: counter(page) ' of ' counter(pages);
  }
}

我在等你的答复。:)

t40tm48m

t40tm48m1#

不可以,您不能仅使用CSS在HTML页面上直接打印页码。CSS主要用于样式和布局目的,它没有用于生成页码的内置功能。
但是,您可以通过使用CSS和JavaScript的组合或利用CSS打印媒体查询来实现这一点。这里有两种方法可以考虑:
1.使用JavaScript:

  • 创建一个JavaScript函数,用于生成页码并将其动态插入HTML文档。
  • 您可以使用JavaScript根据内容和所需布局计算页面数量。
  • 每当内容更改或页面调整大小时,动态更新页码。
  • 应用CSS样式来定位和设置生成的页码的样式。

1.使用CSS打印介质查询:

  • 使用@media print规则定义一个专门用于打印的单独CSS文件。在打印介质查询中,使用content属性和counter()函数来生成和显示页码。定义CSS样式以在打印页面上定位和设置页码样式。

例如:

@media print {
  .page-number:after {
    content: "Page " counter(page);
  }
}

<div class="page-number"></div>
  • 在您的HTML中,添加一个类为“page-number”的元素,您希望在其中显示页码。例如,请参考上面代码的最后一行。
  • 打印页面时,CSS中的content属性将在每个打印页面上生成并显示页码。

请记住,第二种方法仅在打印页面时起作用,而不适用于在屏幕上显示页码。

相关问题