![](/img/trans.png)
[英]How to print in two different printers at the same time using PHP or JavaScript?
[英]How to print tables in different pages at a time using javascript/Jquery
在這里,我需要一次在不同的頁面中打印html表。 所有這些表都在同一個分區內。打印的每一頁應該只有一個表,下一個表應該位於下一頁。 這是我的演示代碼
HTML
<div id="divTimeTables"><table>
<tbody>
<tr><td>table1</td></tr>
<tr><td><table id="tblTeacherTimeTable1"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td></tr><tr><td>Tuesday</td><td>class&Sub2</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
<tr><td></td></tr>
<tr><td>table2</td></tr>
<tr><td><table id="tblTeacherTimeTable2"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Tuesday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
<tr><td></td></tr>
</tbody>
</table></div>
<button id="btnPrint">Print</button>
如果使用CSS打印,則可以僅在第一個表格的底部或要設置分頁符的任何位置添加。 (只是一個選擇的想法)
@media print {
.page-break {page-break-after: initial;}
}
使用媒體查詢
<section>
<table id="table1">
<tbody>
<tr>
<td>table1</td>
</tr>
<tr>
<td>
<table id="tblTeacherTimeTable1">
<thead>
<tr>
<th>TeacherName</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Tuesday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
</tbody>
<tr>
<td>WednessDay</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Thursday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Friday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Friday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</section>
<section>
<table id="table2">
<tbody>
<tr>
<td>table2</td>
</tr>
<tr>
<td>
<table id="tblTeacherTimeTable2">
<thead>
<tr>
<th>TeacherName</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Tuesday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
</tbody>
<tr>
<td>WednessDay</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Thursday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Friday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
<tr>
<td>Friday</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
<td>class&Sub</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</section>
CSS:
@media print {
section {
height:25cm;
}
}
jsfiddle:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.