有没有办法使用JS或CSS激活打印页眉和页脚？

Question

显示页眉和页脚选项

我听说过CSS中的@page，它可以改变边距、方向、分页符，但我的问题是：有没有办法激活“页眉和页脚”选项，因为当我打开打印窗口时它已经已检查

我尝试在CSS上使用@page，但我不知道在这种特定情况下使用什么属性

Answer 1

无法检查客户端是否使用CSS或JS。 （虽然至少在 Chrome 中可以在服务器端使用 puppeteer，但这可能不是你想要的。）

但是，至少在Chome中，打开打印界面时你会发现，当边距为无时，“页眉和页脚”选项将被隐藏，或者设置为默认值，默认边距为0。

因此，一种解决方法是使用 @page {margin: 0;}

禁用

默认页眉和页脚，将默认边距设置为 0。然后，只需实现您自己的页眉和页脚来模拟打印的页眉和页脚：

@page {
  margin: 0;
}

.print-footer {
  @media print {
    display: block;
  }
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

.print-header {
  @media print {
    display: block;
  }
  display: none;
  transform: translate(-8px, -8px);
}

<div class="print-header">
  7/26/24 12:51 PM
</div>
<div class="contents">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
<div class="print-footer">
  https://stackoverflow.com/questions/78799187/is-there-a-way-to-activate-the-printing-header-and-footer-using-js-or-css#
</div>