0

I have a product list and I use in css at 

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>');

for each product div. it's start a new page if the div overfllow to the next page. I want to add header and footer in each page. how can i know which created a new page?

edit the header height is 5cm and footer: 3cm, so the solution from here not relevant. there the header and footer take just the white space on page.. I want to margin the body but only in first div each page

Eran Hadad
  • 46
  • 7
  • Possible duplicate of [header and footer in each page in print mode with css](https://stackoverflow.com/questions/14088745/header-and-footer-in-each-page-in-print-mode-with-css) – CBroe Jul 24 '17 at 16:16
  • `cm` isn't really a unit used in web development. Can you show us the code you are talking about? – Olian04 Jul 24 '17 at 16:27
  • cause I need to print this page, I use cm.. anyway when i used px or % I have the same problem. – Eran Hadad Jul 24 '17 at 16:30
  • @eranhadad Sorry, you misunderstood me, there is no valid unit type called `cm` in css. You __can't__ use `cm`, it wont do anything. – Olian04 Jul 24 '17 at 16:40
  • @Olian04 so what are you suggest me to do? – Eran Hadad Jul 24 '17 at 16:47
  • @Olian04 `cm` is a valid [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) unit. It may not match a real centimeter, but it is valid. – Alexander O'Mara Jul 25 '17 at 03:48

0 Answers0