如何添加页码。使用html2pdf

<div id="content">
  <!-- 这里是需要生成PDF的内容 -->
</div>

<style>
  #content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 50px; /* 为页眉预留空间 */
    padding-bottom: 50px; /* 为页脚预留空间 */
  }

  /* 页眉样式 */
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    text-align: center;
    background-color: #f2f2f2;
    line-height: 50px;
  }

  /* 页脚样式 */
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    text-align: center;
    background-color: #f2f2f2;
    line-height: 50px;
  }
</style>

<div id="content">
  <div id="header">
    <!-- 页眉内容 -->
  </div>
  
  <!-- 这里是需要生成PDF的内容 -->
  
  <div id="footer">
    Page <span class="page"></span> of <span class="total-pages"></span>
  </div>
</div>

<script>
  // 获取页码信息
  var pageCount = 0;
  var currentPage = 0;

  function updatePageCount() {
    var pages = document.querySelectorAll('.page');
    var total = document.querySelectorAll('.total-pages');

    for (var i = 0; i < pages.length; i++) {
      pages[i].textContent = currentPage;
    }

    for (var j = 0; j < total.length; j++) {
      total[j].textContent = pageCount;
    }
  }

  // 使用html2pdf生成PDF
  html2pdf().from(document.getElementById('content')).set({
    filename: 'document.pdf',
    margin: [10, 10, 10, 10],
    pagebreak: { mode: 'css', avoid: '.page-break' },
    onBeforeRender: function () {
      pageCount++;
      currentPage = 1;
      updatePageCount();
    },
    onAfterPageContent: function () {
      currentPage++;
      updatePageCount();
    },
    onAfterAll: function () {
      // 生成PDF完成后的回调函数
    }
  }).save();
</script>