window.print打印设置页脚页码

Question

window.print有什么方法实现页脚有页码还要求居中 显示：第几页/共几页，不需要装控件的那种，还不能写死，不用强制分页，要写个很多页面能通用的方法
翻了一圈没找到解决方法要疯啦

Answer 1

可以使用CSS中的@page规则来实现打印页脚，并结合JavaScript动态获取页码信息，实现动态显示页码和总页数。

具体实现方法如下：

在CSS样式表中添加@page规则：

@page {
  @bottom-center {
    content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
  }
}

这个@page规则将页脚内容设置为"第 X 页 / 共 Y 页"，其中X为页码，Y为总页数，使用CSS中的counter()函数动态获取。

在HTML文件中引入CSS样式表：

<link rel="stylesheet" href="print.css" media="print">

这里将样式表应用于打印媒体类型。

在JavaScript文件中添加以下代码：

window.onload = function() {
  var pageCount = getNumberOfPages();
  var footer = document.createElement("div");
  footer.id = "page-footer";
  footer.innerHTML = "第 <span id='page-number'></span> 页 / 共 " + pageCount + " 页";
  document.body.appendChild(footer);
  updatePageNumber();
  window.onbeforeprint = updatePageNumber;
}

function getNumberOfPages() {
  var totalHeight = document.body.clientHeight;
  var pageHeight = window.innerHeight;
  var pageCount = Math.ceil(totalHeight / pageHeight);
  return pageCount;
}

function updatePageNumber() {
  var pageNumber = getCurrentPageNumber();
  var pageNumberSpan = document.getElementById("page-number");
  pageNumberSpan.innerHTML = pageNumber;
}

function getCurrentPageNumber() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var pageHeight = window.innerHeight;
  var pageNumber = Math.ceil(scrollTop / pageHeight) + 1;
  return pageNumber;
}

这个JavaScript代码实现了动态获取总页数和当前页码，并将页码信息显示在页脚中。具体实现方法如下：

• getNumberOfPages()函数用于获取总页数，根据页面内容高度和浏览器窗口高度计算得出。

• updatePageNumber()函数用于更新页码信息，将当前页码显示在页脚中。

• getCurrentPageNumber()函数用于获取当前页码，根据页面滚动高度和浏览器窗口高度计算得出。

在CSS样式表中添加页脚样式：

#page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
}

这个样式规则将页脚固定在页面底部，并设置样式。

最后，通过调用window.print()方法打印页面时，就可以在每一页的页脚中显示页码信息了。