Как вывести каждую таблицу на отдельной странице при печати с помощью JavaScript?

Оффтоп javascript
1

У меня есть веб-страница с тремя таблицами данных. Сейчас я использую JavaScript для их печати, но все таблицы выводятся вместе. Мне нужно сделать так, чтобы каждая таблица печаталась на отдельном листе.

Вот мой текущий код JavaScript для печати:

function печататьПанель() {
  let панель = document.getElementById('контейнерТаблиц');
  let окноПечати = window.open('', '', 'height=600,width=800');
  
  окноПечати.document.write('<html><head><title>Печать таблиц</title></head><body>');
  окноПечати.document.write(панель.innerHTML);
  окноПечати.document.write('</body></html>');
  окноПечати.document.close();

  setTimeout(() => окноПечати.print(), 500);

  return false;
}

Как мне изменить этот код, чтобы каждая таблица выводилась на новой странице при печати? Буду благодарен за помощь!

2

Можно решить задачу, добавив стили для печати через JavaScript. Примерно так:

окноПечати.document.write(‘table { page-break-after: always; }’);

Это добавит разрыв страницы после каждой таблицы. Еще вариант - обернуть таблицы в отдельные div’ы и применить стиль к ним:

панель.querySelectorAll(‘table’).forEach(table => {
table.outerHTML = ‘

’ + table.outerHTML + ‘
’;
});

Так каждая таблица будет на отдельном листе при печати.

3

слушай, а может попробовать через @media print? я недавно делал похожую штуку, работало норм. типа такого:

@media print {
table {
page-break-before: always;
}
table:first-child {
page-break-before: avoid;
}
}

это в css добавляешь, и при печати каждая таблица с новой страницы будет. первую таблицу исключаем, чтоб сразу с нее не начиналось. если что, можно еще поиграться с margins, чтоб все красиво выглядело. главное - не забудь подключить этот css к своей странице. удачи!