jQuery.print.js打印显示页码

vue项目中使用jQuery.print.js打印页面时，怎样实现添加页码数（内容过多，打印多张的时候，显示页码数）

思路就是在打印事件里，给打印版本的网页每一页附加一个div，里面放上页码
media print 使得这个只出现在打印中，而不是显示网页里
具体代码：

// Define the page size and margins using CSS
@media print {
  @page {
    size: A4;
    margin: 2cm;
  }
}

// Add the page numbers to the printed content using JavaScript
$(document).on('beforePrint', function() {
  var pageCount = 1;
  $('.page-break').each(function() {
    $(this).prepend('<div class="page-number">Page ' + pageCount + '</div>');
    pageCount++;
  });
});

假定打印内容在print-content的元素中
// 添加页码数并打印
    printWithPageNumbers() {
      // 获取所有需要打印的内容
      const printContent = document.querySelector('#print-content');
      // 获取内容的高度
      const contentHeight = printContent.clientHeight;
      // 获取一页的高度，可以根据实际情况设置，也可以通过打印机打印预览来调整
      const pageHeight = 800;
      // 计算总页数
      const pageCount = Math.ceil(contentHeight / pageHeight);

      // 创建页码元素并添加到每一页内容的底部
      for (let i = 1; i <= pageCount; i++) {
        const pageNumber = document.createElement('div');
        pageNumber.textContent = '第 ' + i + ' 页';
        pageNumber.style.position = 'absolute';
        pageNumber.style.bottom = '10px';
        pageNumber.style.right = '10px';
        pageNumber.style.fontSize = '14px';
        pageNumber.style.fontWeight = 'bold';
        printContent.appendChild(pageNumber);
      }

      // 调用打印功能
      jQuery('#print-content').print();
    },

不知道你这个问题是否已经解决, 如果还没有解决的话:

建议你看下这篇博客👉 ：基于jquery.PrintArea.js打印

除此之外, 这篇博客: JQuery.PrintArea.js的局部打印 “回调”中的 我这里只是简单的页面跳转有需要的可以该成自己写的函数 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

getBody : function ( elements ) {
            var htm = "";
            var attrs = settings.retainAttr;
            elements.each(function() {
                var ele = PrintArea.getFormData( $(this) );

                var attributes = ""
                for ( var x = 0; x < attrs.length; x++ )
                {
                    var eleAttr = $(ele).attr( attrs[x] );
                    if ( eleAttr ) attributes += (attributes.length > 0 ? " ":"") + attrs[x] + "='" + eleAttr + "'";
                }

                htm += '<div ' + attributes + '>' + $(ele).html() + '</div>';
            });

            return "<body οnafterprint='parent.location.href = \"order.html\"'" + ">" + htm + "</body>";
        },

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

你好，请问解决问题了嘛？我也碰到这样的需求了。如果解决了请告知一下解决方法谢谢