Question

我有一个产品清单，我在css中使用

var dishByCategory = _.groupBy(menu.dishes, d => d.categoryName);

var mywindow = window.open('', 'PRINT', 'height=auto,width=auto');  //Create window for print

mywindow.document.write('<html><head><title>' + menu.name + '</title>');
mywindow.document.write('<style>' +
  'body{text-align: right; font-family: calibri; }' +
  'h1{text-align: center;}' +
  'h2{text-align: center; text-decoration: underline; direction: rtl;}' +
  'h3{margin: 0.2cm;}' +
  'h4{font-size: 22px; margin: 0cm 3cm;}' +
  '.menuList{margin: 0cm 5cm;}' +

  '@media print { .content{ page-break-inside: avoid; } }' +

  '.logo{text-align: center; height: 5cm;}' +
  '.footer{text-align: center; height: 3cm; font-family: times new roman;}' +
  'img{height: 5cm; width: auto; }' +
  '</style>');

mywindow.document.write('</head><body >');


mywindow.document.write('<div class="A4">');  //start of A4

for (let cat of menu.categories) {
  var categoryDishes = dishByCategory[cat.categoryName];
  var includeDishes = categoryDishes.filter(d => { return !d.extraPrice })
  var notIncludeDishes = categoryDishes.filter(d => { return d.extraPrice })

  mywindow.document.write('<div class="content">'); //start of content
  mywindow.document.write('<br><h1>' + menu.name + ' - ' + cat.categoryName + '</h1>');
  if (cat.dishesCount) {
    mywindow.document.write('<h2> ' + cat.dishesCount + ' type to select</h2>');
  }

  mywindow.document.write('<div class="menuList">');
  for (let dish of includeDishes)
  {
    mywindow.document.write('<h3>' + dish.name + '</h3>');
  }
  mywindow.document.write('</div>');

  if (notIncludeDishes.length > 0)
  {
    mywindow.document.write('<h4>some title</h4>');
    mywindow.document.write('<div class="menuList">');
    for (let dish of notIncludeDishes) {
      mywindow.document.write('<h3>' + dish.name + '</h3>');
    }
    mywindow.document.write('</div>');
  }
  mywindow.document.write('</div>');  //end of content      
}

mywindow.document.write('</div>');  //end of A4


mywindow.document.write('</body></html>');

每个产品div。如果div超过下一页，它会启动一个新页面。我想在每个页面中添加页眉和页脚。我怎么知道哪个创建了新页面？

修改标题高度为5厘米，页脚：3厘米，因此here的解决方案无关紧要。那里的页眉和页脚只占用了页面上的空白区域..我想要保留身体但仅限于每页的第一个div

添加页眉和页脚打印页面js

0 个答案: