jQuery.print.js打印显示页码

Question

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

Answer 1

思路就是在打印事件里，给打印版本的网页每一页附加一个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++;
  });
});