Я использую ссылку для отправки пользователя на печатный html. Когда он перенаправлен, я использую функцию JS window.onload = function(){window.print()}, чтобы показать окно предупреждения. Проблема в том, что предварительный просмотр версии для печати продолжается до первой страницы текста (что подходит). И вторая страница - это моя функция JS
Я пытаюсь использовать печатную таблицу стилей CSS, но мне не удается сделать разрывы страниц
printable.html
<body>
<div class="wrapper">
<br><br>
<section class="invoice">
<div class="row">
<div class="col-xs-12 col-lg-12">
<small class="float-right">Date: 12-10-11</small>
<br>
<small>No. 564198415641</small>
<h2 class="page-header">
<img style="width:300px;" src="/images/logo2x.png">
<br>
</h2>
</div>
</div>
<h4 class="text-center">Part 1</h4>
<h4 class="text-center" style="margin-bottom:50px;">model.project.platform ASSIGMEMT AGREEMENT <br> BASIC TERMS AND CONDITIONS</h4>
<div class="row invoice-info">
<div class="col-xs-12 col-lg-12">
<ol>
<li>The Assign: The Lorem Ipsum</li>
<li>The System ID Number: 4854154848</li>
<li>System ID : 51654651</li>
<li>Number: 64568744154</li>
<li>
Composition of the Claim:
<ol>
<li>the part of the: 51654</li>
<li>Lorem 1854</li>
</ol>
</li>
<li>Lorem: 54</li>
<li>Ipsum: 654</li>
</ol>
</div>
<div class="col-xs-12 col-lg-12">
<div class="page-content">
<div class="container">
<div class="row">
<div class="main-content col-lg-12">
<div class="content-area card">
<div class="card-innr">
<div class="card-head">
<h1 class="card-title card-title-lg text-center">
ASSIGNMENT AGREEMENT
<br>
GENERAL TERMS AND CONDITIONS
</h1>
</div>
</div>
</div>
</div>
<div class="main-content col-lg-12">
<div class="content-area card">
<div class="card-innr">
<div class="card-head">
<h4 class="card-title card-title-lg">1. DEFINITIONS AND INTERPRETATIONS</h4>
</div>
<div class="content">
<ol>
<li><p>The Lorem Ipsum ipsum iaopshfoih ioylhgn 95hksnndsa IOUAHSDFNBVSAD hnokefhn</p></li>
<table>
<tr>
<td class="font-bold">Ipsum 1</td>
<td class="text-muted">Lorem 1</td>
</tr>
<tr>
<td class="font-bold">Ipsum 2</td>
<td class="text-muted">Lorem 2</td>
</tr>
<tr>
<td class="font-bold">Ipsum 3</td>
<td class="text-muted">Lorem 3</td>
</tr>
<tr>
<td class="font-bold">Ipsum 4</td>
<td class="text-muted">Lorem 4.</td>
</tr>
<tr>
<td class="font-bold">Ipsum 5</td>
<td class="text-muted">Lorem 5</td>
</tr>
<tr>
<td class="font-bold">Ipsum 6</td>
<td class="text-muted">Lorem 6</td>
</tr>
</table>
<li><p>More ipsum.</p></li>
<li><p>More ipsum.</p></li>
<li><p>More ipsum.</p></li>
<li><p>More ipsum.</p></li>
<li><p>More ipsum.</p></li>
<li><p>More ipsum.</p></li>
</ol>
</div>
</div>
</div>
</div>
<div class="main-content col-lg-12">
<div class="content-area card">
<div class="card-innr">
<div class="card-head">
<h4 class="card-title card-title-lg">2. GENERAL</h4>
</div>
<div class="content">
<ol>
<li><p>More Lorem.</p></li>
<li><p>More Lorem.</p></li>
<li><p>More Lorem.</p></li>
<li><p>More Lorem.</p></li>
<li><p>More Lorem.</p></li>
<li><p>More Lorem.</p></li>
</ol>
</div>
</div>
</div>
</div>
<div class="main-content col-lg-12">
<div class="content-area card">
<div class="card-innr">
<div class="card-head">
<h4 class="card-title card-title-lg">3. SUPER IPSUM</h4>
</div>
<div class="content">
<ol>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
<li><p>Super Lorem.</p></li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
<script type="text/javascript">
window.onload = function() { window.print(); }
</script>
printable.css
@media print {
body {
margin: 0;
color: #000;
background-color: #fff;
}
a[href*='//']:after {
content:" (" attr(href) ") ";
color: #253992;
}
a:after {
content:" (" attr(href) ") ";
color: #253992;
}
.box{
display: none;
}
.page-break-after {
page-break-after: always!important;
}
body, body *{
display: block!important;
overflow: visible;
position: static;
}
.page-break-before {
page-break-before: always;
}
p {
page-break-inside: avoid;
}
@page {
margin-top: 2cm;
margin-bottom: 2cm;
margin-left: 2cm;
margin-right: 2cm;
}
}
Предварительный просмотр показывает только одну страницу HTML и неполной. И вторая страница только JS.
Я хочу получить весь документ.