如何在HTML中实现页面在打印预览界面在自定义页脚显示自定义页码的功能？

在HTML中实现页面在打印预览时显示自定义页脚和页码，通常需要用到CSS和JavaScript结合。你可以通过`@media print`规则来设置打印样式，并利用JavaScript动态生成页码。

以下是一个简单的步骤示例：

1. **添加页脚元素**:
在HTML中创建一个固定的页脚区域，例如一个`<footer>`标签，用于放置页码。例如：

   <footer id="print-footer">
     <span id="page-number"></span>
   </footer>

2. **CSS打印样式**:
使用`@media print`规则，设置页眉和页脚的样式，使其在打印时可见：

   @media print {
     footer {
       position: fixed; /* 设置固定位置 */
       bottom: 0;        /* 将其放在底部 */
       left: 0;
       right: 0;
       background-color: #f5f5f5; /* 添加背景色或其他设计 */
       padding: 1rem; /* 一些内边距 */
     }
   }

3. **JavaScript动态生成页码**:
使用JavaScript获取当前的页面数，并将其插入到`<span>`标签中：

   function updatePageNumber() {
     var totalPages = Math.ceil(window.document.body.scrollHeight / window.innerHeight);
     document.getElementById('page-number').innerText = '第 ' + (window.printCounter || 1) + ' / ' + totalPages + ' 页';
   }

   // 当窗口滚动或首次加载页面时更新页码
   window.addEventListener('scroll', updatePageNumber);
   window.addEventListener('DOMContentLoaded', updatePageNumber);

   // 打印按钮点击事件
   document.getElementById('print-button').addEventListener('click', function(e) {
     e.preventDefault();
     updatePageNumber();
     window.print(); // 调用浏览器的打印功能
   });

4. **提供打印按钮**:
在你的页面上添加一个打印按钮，当用户点击时触发打印并更新页码：

   <button id="print-button">打印</button>

记得将上述代码片段整合到你的实际项目中，并根据需要调整样式和逻辑。