Javascript распечатать несколько div на разных страницах

Мне нужно печатать на бумаге формата А4 с каждым <div> начиная с разных страниц

<div id="1">
  //content
 </div>
 
 <div id="2">
  //content
 </div>
 
 <div id="3">
  //content
 </div>
 
 ....

Например, <div id="1"> может быть 2 или 3 страницы по содержанию, но <div id="2"> все еще нужно начать на новой странице.

Источник

3 ответа

В вашем CSS:

#1 {page-break-after: always;}
#2 {page-break-after: always;}
#3 {page-break-after: always;}

Где #1 - это идентификатор вашего div

Источник

Не используйте JavaScript, используйте CSS:

@media print {
  /* top-level divs with ids */
  body > div[id] {
    page-break-before: always;
  }
}

Это использует медиа-запрос и свойство разрыва страницы, чтобы гарантировать, что непустой <div>с ids всегда будет начинаться с новой страницы при просмотре (или печати) на выгружаемом носителе.

Сохраните ниже как файл HTML и откройте его в браузере с помощью диалогового окна печати. Вы увидите, что каждый <div> начинается на новой странице:

<!DOCTYPE html>
<html>
<head>
  <style>
    @media print {
      /* top-level divs with ids */
      body > div[id] {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <div id="1">
    content
  </div>

  <div id="2">
    content
  </div>

  <div id="3">
    content
  </div>
</body>
</html>
Источник

Вы можете использовать следующие CSS:

div {
  page-break-after: always;
}

Свойство page-break-after устанавливает, должен ли разрыв страницы происходить ПОСЛЕ указанного элемента.

Прочитайте это для полной информации - https://www.w3schools.com/cssref/pr_print_pageba.asp

Источник
Другие вопросы по тегам