JavaScript — при печати просто показывает текст первой страницы

При печати просто отображается текст первой страницы

Я использую ссылку, чтобы отправить пользователя для печати HTML. Когда он перенаправлен, я использую функцию JS window.onload = function(){window.print()} для отображения окна предупреждения. Проблема в том, что предварительный просмотр версии для печати продолжается до первой страницы текста (что подходит). И вторая страница — моя функция JS

Я пытаюсь использовать печатную таблицу стилей CSS, но мне не удается сделать разрывы страниц

printable.html

 {amp}lt;body{amp}gt; {amp}lt;div class="wrapper"{amp}gt; {amp}lt;br{amp}gt;{amp}lt;br{amp}gt; {amp}lt;section class="invoice"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-xs-12 col-lg-12"{amp}gt; {amp}lt;small class="float-right"{amp}gt;Date: 12-10-11{amp}lt;/small{amp}gt; {amp}lt;br{amp}gt; {amp}lt;small{amp}gt;No. 564198415641{amp}lt;/small{amp}gt; {amp}lt;h2 class="page-header"{amp}gt; {amp}lt;img style="width:300px;" src="/images/logo2x.png"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;h4 class="text-center"{amp}gt;Part 1{amp}lt;/h4{amp}gt; {amp}lt;h4 class="text-center" style="margin-bottom:50px;"{amp}gt;model.project.platform ASSIGMEMT AGREEMENT {amp}lt;br{amp}gt; BASIC TERMS AND CONDITIONS{amp}lt;/h4{amp}gt; {amp}lt;div class="row invoice-info"{amp}gt; {amp}lt;div class="col-xs-12 col-lg-12"{amp}gt; {amp}lt;ol{amp}gt; {amp}lt;li{amp}gt;The Assign: The Lorem Ipsum{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;The System ID Number: 4854154848{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;System ID : 51654651{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Number: 64568744154{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; Composition of the Claim: {amp}lt;ol{amp}gt; {amp}lt;li{amp}gt;the part of the: 51654{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Lorem 1854{amp}lt;/li{amp}gt; {amp}lt;/ol{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Lorem: 54{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Ipsum: 654{amp}lt;/li{amp}gt; {amp}lt;/ol{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-xs-12 col-lg-12"{amp}gt; {amp}lt;div class="page-content"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="main-content col-lg-12"{amp}gt; {amp}lt;div class="content-area card"{amp}gt; {amp}lt;div class="card-innr"{amp}gt; {amp}lt;div class="card-head"{amp}gt; {amp}lt;h1 class="card-title card-title-lg text-center"{amp}gt; ASSIGNMENT AGREEMENT {amp}lt;br{amp}gt; GENERAL TERMS AND CONDITIONS {amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="main-content col-lg-12"{amp}gt; {amp}lt;div class="content-area card"{amp}gt; {amp}lt;div class="card-innr"{amp}gt; {amp}lt;div class="card-head"{amp}gt; {amp}lt;h4 class="card-title card-title-lg"{amp}gt;1. DEFINITIONS AND INTERPRETATIONS{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="content"{amp}gt; {amp}lt;ol{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;The Lorem Ipsum ipsum iaopshfoih ioylhgn 95hksnndsa IOUAHSDFNBVSAD hnokefhn{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;table{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="font-bold"{amp}gt;Ipsum 1{amp}lt;/td{amp}gt; {amp}lt;td class="text-muted"{amp}gt;Lorem 1{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="font-bold"{amp}gt;Ipsum 2{amp}lt;/td{amp}gt; {amp}lt;td class="text-muted"{amp}gt;Lorem 2{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="font-bold"{amp}gt;Ipsum 3{amp}lt;/td{amp}gt; {amp}lt;td class="text-muted"{amp}gt;Lorem 3{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="font-bold"{amp}gt;Ipsum 4{amp}lt;/td{amp}gt; {amp}lt;td class="text-muted"{amp}gt;Lorem 4.{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="font-bold"{amp}gt;Ipsum 5{amp}lt;/td{amp}gt; {amp}lt;td class="text-muted"{amp}gt;Lorem 5{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="font-bold"{amp}gt;Ipsum 6{amp}lt;/td{amp}gt; {amp}lt;td class="text-muted"{amp}gt;Lorem 6{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More ipsum.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More ipsum.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More ipsum.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More ipsum.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More ipsum.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More ipsum.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ol{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="main-content col-lg-12"{amp}gt; {amp}lt;div class="content-area card"{amp}gt; {amp}lt;div class="card-innr"{amp}gt; {amp}lt;div class="card-head"{amp}gt; {amp}lt;h4 class="card-title card-title-lg"{amp}gt;2. GENERAL{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="content"{amp}gt; {amp}lt;ol{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;More Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ol{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="main-content col-lg-12"{amp}gt; {amp}lt;div class="content-area card"{amp}gt; {amp}lt;div class="card-innr"{amp}gt; {amp}lt;div class="card-head"{amp}gt; {amp}lt;h4 class="card-title card-title-lg"{amp}gt;3. SUPER IPSUM{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="content"{amp}gt; {amp}lt;ol{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;p{amp}gt;Super Lorem.{amp}lt;/p{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ol{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; window.onload = function() { window.print(); } {amp}lt;/script{amp}gt; 

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.

Я хочу получить весь документ.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector