分頁后是否可以重復內容？ 你能檢測到分頁符嗎？
[英]Is it possible to repeat content after a page-break? Can you detect a page-break?
問題描述
我有一個大網頁，打印時通常需要多個分頁符。 然而，這意味着內容與父布局結構的其余部分分開，用戶可能不明白它涉及哪個問題。 類似於下面的例子
當前行為
A 1 i What is the capital of Peru?
ii What is the capital of Brazil?
iii What is the capital of Equador?
2 i What is the population of France?
ii What is the population of Spain?
___________________________________________
iii What is the population of Italy?
我想要做的是在頁面的 beinning 重復問題編號，以便孤立的問題有父母的參考。
期望的行為
A 1 i What is the capital of Peru?
ii What is the capital of Brazil?
iii What is the capital of Equador?
2 i What is the population of France?
ii What is the population of Spain?
___________________________________________
A 2 iii What is the population of Italy?
有沒有辦法用 CSS 做到這一點？ 我不知道如何使用 CSS 'page-break' 屬性。 否則可能是 Javascript？ 順便說一下，我將使用 wkhtmltopdf 將 html 轉換為 pdf。
添加了一些示例代碼。
td, th { vertical-align: top; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" typZe="text/css" href="css/main.css"> </head> <body> <table style="height: 202px; width: 557px;"> <thead> <tr> <th>Main</th> <th>Sub</th> <th>Subsub</th> <th>Question</th> <th>Marks</th> </tr> </thead> <tbody> <tr> <td rowspan="6">1</td> <td rowspan="3">a</td> <td>i</td> <td>Here is a question 1</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 2</td> <td>1.0</td> </tr> <tr> <td>iii</td> <td> <p>Here is a question 3</p> </td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 4</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 5</td> <td>1.0</td> </tr> <tr> <td>c</td> <td> </td> <td>Here is a question 6</td> <td>1.0</td> </tr> <tr> <td rowspan="3">2</td> <td>a</td> <td> </td> <td>Here is a question 7</td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 8</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 9</td> <td> <p>1.0</p> </td> </tr> <tr> <td rowspan="6">3</td> <td rowspan="3">a</td> <td>i</td> <td>Here is a question 10</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 11</td> <td>1.0</td> </tr> <tr> <td>iii</td> <td>Here is a question 12 </td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 13</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 14</td> <td>1.0</td> </tr> <tr> <td>c</td> <td> </td> <td>Here is a question 15</td> <td>1.0</td> </tr> <tr> <td rowspan="6">4</td> <td rowspan="3">a</td> <td>i</td> <td>Here is a question 16</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 17</td> <td>1.0</td> </tr> <tr> <td>iii</td> <td> <p>Here is a question 18</p> </td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 19</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 20</td> <td>1.0</td> </tr> <tr> <td>c</td> <td> </td> <td>Here is a question 21</td> <td>1.0</td> </tr> <tr> <td rowspan="6">5</td> <td rowspan="3">a</td> <td>i</td> <td>Here is a question 22</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 23</td> <td>1.0</td> </tr> <tr> <td>iii</td> <td> <p>Here is a question 24</p> </td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 25</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 26</td> <td>1.0</td> </tr> <tr> <td>c</td> <td> </td> <td>Here is a question 27</td> <td>1.0</td> </tr> <tr> <td rowspan="3">6</td> <td>a</td> <td> </td> <td>Here is a question 28</td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 29</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 30</td> <td> <p>1.0</p> </td> </tr> <tr> <td rowspan="6">7</td> <td rowspan="3">a</td> <td>i</td> <td>Here is a question 31</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 32</td> <td>1.0</td> </tr> <tr> <td>iii</td> <td>Here is a question 33</td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 34</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 35</td> <td>1.0</td> </tr> <tr> <td>c</td> <td> </td> <td>Here is a question 36</td> <td>1.0</td> </tr> <tr> <td rowspan="6">8</td> <td rowspan="3">a</td> <td>i</td> <td>Here is a question 37</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 38</td> <td>1.0</td> </tr> <tr> <td>iii</td> <td> <p>Here is a question 39</p> </td> <td>1.0</td> </tr> <tr> <td rowspan="2">b</td> <td>i</td> <td>Here is a question 40</td> <td>1.0</td> </tr> <tr> <td>ii</td> <td>Here is a question 41</td> <td>1.0</td> </tr> <tr> <td>c</td> <td> </td> <td>Here is a question 42</td> <td>1.0</td> </tr> </tbody> </table> </body> </html>
2 個解決方案
解決方案1
0 已采納 2020-03-08 17:31:17
下面的代碼使用響應式網格系統和 CSS page-break-inside屬性。
基本上，我們將page-break-inside屬性的值設置為avoid ，這意味着在同一頁面上顯示完整的項目，而不是在分頁時中斷它。 這意味着整個項目將顯示在同一頁面上。
在您的情況下，我們會將整個主組包含在一個 div 中並分配page-break-inside屬性。 為了獲得表格結構，我們將使用 CSS 網格系統、行和列。
現在，此代碼不會在分頁符上復制主 q.no、子 q.no。 但它會將同一主要 q.no 的所有問題保留在同一頁面上。
這段代碼也可以通過for循環來實現動態填充頁面。
注意print CSS 類。 它被分配到我們正在創建新主要問題的行。 如果這符合您的目的，我可以幫助您設計for循環，如果它看起來很復雜...
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto { position: relative; width: 100%; } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } @media print { .print { page-break-inside: avoid; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="row print"> <div class="col-1"> 1 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> <div class="row print"> <div class="col-1"> 2 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> <div class="row print"> <div class="col-1"> 3 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> <div class="row print"> <div class="col-1"> 4 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> <div class="row print"> <div class="col-1"> 5 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> <div class="row print"> <div class="col-1"> 6 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> <div class="row print"> <div class="col-1"> 7 </div> <div class="col-11"> <div class="row"> <div class="col-1"> a </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> b </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> <div class="row"> <div class="col-1"> c </div> <div class="col-11"> <div class="row"> <div class="col-1">i</div> <div class="col-10">Here is question 1</div> <div class="col-1">1.0</div> </div> <div class="row"> <div class="col-1">ii</div> <div class="col-10">Here is question 2</div> <div class="col-1"> 1.0 </div> </div> <div class="row"> <div class="col-1">iii</div> <div class="col-10">Here is question 3</div> <div class="col-1"> 1.0 </div> </div> </div> </div> </div> </div> </body> </html>
解決方案2
0 2020-03-09 15:47:44
通過使用page-break-after: avoid; 在 CSS 中，如果可能，您可以告訴站點在打印指定對象時避免斷頁。 或者，您可以使用page-break-after或page-break-before設置類，以便打印機知道什么時候應該將東西推倒或保持。 我希望這會有所幫助，這是我用作參考的文檔。
W3Schools： https : //www.w3schools.com/cssref/pr_print_pageba.asp
MDN： https : //developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
頁面中斷無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.