CSS 在网站打印的每一页上都打印页脚（跨所有浏览器）

在本文中，我们将介绍如何使用CSS在打印的每一页上添加页脚，以及如何确保在所有浏览器下都能正常显示。打印时添加页脚可以提供更好的打印体验，方便读者查阅和归档。我们将为您提供一些示例代码来帮助您实现此功能。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用@page规则添加页脚

要在打印的每一页上添加页脚，我们可以使用CSS的@page规则。@page规则可以定义打印页面的属性和样式。我们可以在其中定义页眉、页脚和页面尺寸等属性。

下面是一个示例，演示如何在打印页面的页脚中添加自定义文本：

@page {
  @bottom-center {
    content: "页脚文本";
  }
}

在上面的示例中，我们通过@bottom-center选择器将内容添加到页脚的中间位置。您可以根据需要选择不同的位置，如@bottom-left、@bottom-right等。content属性用于设置要添加到页脚的文本内容。

在某些浏览器中，上述代码可能无法正常工作。为了确保在所有浏览器中都能正常显示页脚，我们需要添加一些额外的样式。下面是一个改进的示例：

@page {
  margin: 1cm;
  @bottom-center {
    content: "页脚文本";
    color: #333;
    font-size: 12px;
  }
}

body {
  margin: 0;
}

@media print {
  body {
    margin: 1.5cm;
  }
}

在上面的示例中，我们为@page设置了一个边距（margin），以便在打印时保留适当的空白。我们还定义了页脚文本的颜色和字体大小。通过在页面上添加媒体查询（@media print），我们还修改了页面主体的边距，以确保在打印时内容不会被页脚遮挡。

浏览器兼容性考虑

尽管使用@page规则可以在大多数现代浏览器中正常工作，但某些浏览器可能不支持或以不同的方式支持@page规则。为了确保在所有主流浏览器中都能正常显示页脚，我们还可以使用JavaScript来进行处理。

window.onload = function() {
  if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
      if (mql.matches) {
        // 执行打印时的操作
        addFooter();
      }
    });
  }
};

function addFooter() {
  var footerText = document.createElement('div');
  footerText.innerHTML = "页脚文本";
  footerText.style.position = 'fixed';
  footerText.style.bottom = 0;
  footerText.style.left = 0;
  footerText.style.width = '100%';
  footerText.style.textAlign = 'center';
  document.body.appendChild(footerText);
}

上面的JavaScript代码将在打印时添加一个固定位置的页脚。它会检测是否正在进行打印操作，并在打印时调用addFooter()函数向页面添加页脚文本。