在视图和打印中使用 Javascript Jquery 进行分页
问题描述 投票：0回答：1
我有这样的代码，当第一页中的数据重叠时，我想使用分页符必须转到下一页，因为我的
container-body3
function printForms() {
window.print();
}<style>
.container-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: auto;
padding-bottom: 50px;
background-color: #cccccc;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 5%;
background-color: #f0f0f0;
border-radius: 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
padding: 0 10px;
}
.print-button {
background-color: #b2c2ce;
color: white;
border: none;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
margin-right: 500px;
}
.container-body3 {
width: 210mm;
height:297mm;
background-color: #ffffff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
padding: 20px;
position: relative;
padding: 50px;
}
.appendix {
position: absolute;
top: 65px;
right: 50px;
font-size: 14px;
font-style: italic;
}
table {
border: 3px solid;
border-collapse: collapse;
width: 100%;
margin-top: 40px;
}
th,
td {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.center-text {
text-align: center;
vertical-align: top;
}
.dvnumber {
background-color:#c6e0b4;
border:1.8px solid;
font-size: 15px;
}
.coloredrow {
background-color: rgb(158, 198, 255);
-webkit-print-color-adjust: exact;
}
.align-u-left {
text-align: left;
vertical-align: top;
}
table.myClass * { /*new*/
border: 0;
}
@media print {
.container {
display: none;
}
.container-body3 {
page-break-inside: auto;
margin: 0;
}
.page-break {
page-break-before: always;
}
.header {
margin-top: 0; /* Default margin for the header */
}
@page {
margin: 10mm; /* Default margin for the whole page */
}
.header.large-margin {
margin-top: 50mm; /* Adjust this value as needed */
}
.page-start-5 ~ .header {
margin-top: 50mm; /* Larger margin to simulate a new header for pages starting after page 4 */
}
.container-body3{
background-color: #f0f0f0;
box-shadow: none;
width: 210mm;
height: 297mm;
margin-top: -30px;
}
.container h3 {
color: transparent;
}
.container-wrapper {
align-items: flex-start;
}
table {
margin-top: 15px;
border: 3px solid;
}
.appendix {
top: 45px;
}
/* Adjust font size for Disbursement Voucher in print */
.center-text b {
font-size: 14px;
}
.dvnumber {
background-color: #c6e0b4 !important;
-webkit-print-color-adjust: exact;
color: black; /* Make sure text remains readable */
border: 1.8px solid;
font-size: 15px;
}
.container-body3{
page-break-before: always;
}
.footer {
margin-top: 95% !important;
}}
.innerTable{
margin:0px;
border-color:white;
}
.lastRow{
padding:0px;
}
.align-text-right{
text-align: right;
}
.align-text-right{
text-align: right;
}
.no-border{
border: 0;
}
.footer {
margin-top: 99%;
}
</style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<html>
<body>
<div class="container-wrapper">
<div class="container">
<h3></h3>
<button class="print-button" onclick="printForms()">Print</button>
</div>
<div class="container-body3">
<br><br><br>
<span style="font-family: Calibri, sans-serif;" ><center>TESTING HEADER HEADER HEADER HEADER<br> SUB HEADER / SUB HEADER / SUB<br> no# 24-03-767 <br> for January 29, 2024</center></span>
<table style="font-family: Calibri, sans-serif;" >
<thead></thead>
<tbody>
<tr >
<td><b>No.</b></td>
<td><b>Account Number</b></td>
<td><b>ID NUMBER</b></td>
<td><b><center>NAME</center></b></td>
<td><b>AMOUNT</b></td>
<td><b>CHARGE</b></td>
<td><b><center>PURPOSE</center></b></td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="ali gn-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
</tbody>
</table>
<table style="border: 0; font-family: Calibri, sans-serif;" class="myClass" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td>
<table style="border: 0;">
<tbody>
<tr>
<td style="width: 0px;border:0;"></td>
<td style="width: 30px;border:0;"></td>
<td style="width: 100px;border:0;"></td>
</tr>
<tr>
<td style="font-size: 13px;padding: 0;" colspan="2" class="no-border">PREPARED BY:</td>
</tr>
<tr>
<td class="no-border"></td>
</tr>
<tr>
<td class="no-border"></td>
<td class="no-border" colspan="2" >
<!-- <center><b><u>Janice UUUUU</u></b></center> -->
<center><b><u><span contenteditable="true" id="editableName">Reymark Santiago</span></u></b></center>
</td>
</td>
</tr>
<tr>
<td class="no-border"></td>
<td class="no-border" colspan="2">
<center><span contenteditable="true" id="editablePosition">AAAA III</span></center>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="border: 0;">
<tbody>
<tr>
<td style="width: 140px;border:0;"></td>
<td style="width:80px;border:0;"></td>
<td style="width:72px;border:0;"></td>
<td style="border:0;"></td>
</tr>
<tr>
<td style="font-size: 15px;background-color:rgb(158, 198, 255); padding: 0;" class="no-border coloredrow"><b>CHARGE</b></td>
<td style="font-size: 15;background-color:rgb(158, 198, 255); padding: 0; text-align: right;" colspan="2" class="no-border coloredrow"><b>Sum of AMOUNT</b></td>
</tr>
<tr>
<td style="padding: 0;" class="no-border"> charges</td>
<td style="padding: 0; text-align: right;" class="no-border" colspan="2">
5,482,119.00
</td>
</tr>
<tr>
<td style="padding: 0;;background-color:rgb(158, 198, 255);" class="no-border coloredrow"><b>GRAND Total</b></td>
<td style="padding: 0;background-color:rgb(158, 198, 255); text-align: right;" class="no-border coloredrow" colspan="2"><b>5,482,119.00</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>1个回答
0
投票
投票
您必须了解您编写的 HTML 代码看起来像 PDF，而不是实际的 PDF 代码。在您的代码中，您没有为第二个页面容器编写代码，因此内容将会溢出。当然，您可以使用
overflow: auto检测内容和附加div的高度 检测内容的高度（使用
），然后在高度大于容器高度时添加额外的页面 div。offsetHeight使用外部库 有多个像
这样的库可以为您处理所有这些情况，并在您的网站中添加对 pdf 的支持。pdf.js
最新问题
- Wix 补丁生成错误
- 分页 API 过滤后的 axios 结果数组为空
- 如何使用 SQLAlchemy 查询 (PostgreSQL) 视图
- 在服务器上运行的Pascal编译器
- 什么是用于重构文本的简单网页编译器？
- .js 和 .mjs 文件有什么区别？
- C 中 printf 的语法
- VBA 代码将工作表拆分为多个工作簿，同时还保存格式和工作表保护/锁定单元格
- 使用Flash Runtime作为平台（类似于JVM / CLR）
- 将多值字符串设置为要插入到数据库表中的行[重复]
- 为什么 C# 编译器为 GetType() 方法调用发出 callvirt 指令？
- Visual studio，如何输出构建所花费的时间？
- 内爆数组给出错误[重复]
- ValueError：无法将 NumPy 数组转换为张量（不支持的对象类型 csr_matrix）
- AWS Connect - 在通话进行时向客服人员播放录音并进行联系。或者，将文本转语音字符串插入到当前通话中
- 使用gdb将地址转换为行
- 防止 Keras3 中某些样本的权重更新
- 即使删除本地 ssh 密钥后仍然可以访问 LAMP 服务器
- PDFbox 中的 PDF 字段无法在移动设备上打印（Android 通用 pdf 查看器问题）
- 查找 64 位中零半字节的位置
© www.soinside.com 2019 - 2024. All rights reserved.