javascript - CSS 打印内容溢出页脚。如何解决？

Question

首先代码运行正常。它在每一页上显示页脚。但我希望当内容溢出到页脚时，打破当前页面并添加一个新页面。内容不得溢出页脚。

我怎样才能做到这一点？感谢您的帮助，对于任何语法错误，我们深表歉意。如果您发现任何错误，请编辑问题。

@media print {
    body {
        visibility:hidden;
    }
    page[size="A4"] > * {
        visibility:visible;
    }
    #footer {
        visibility:visible;
        display: block !important;
        position:fixed;
        bottom:0px;
        left:0px;
        width:100%;
        color:#000;
        padding:8px;
    }
}
page {
    background: #fff;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    position: relative;
}
page[size="A4"] {
    width:21cm;
    min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    min-height: 21cm;
}
tr.border_bottom td{
    border-bottom: 1px solid #000
}
#footer {
    display: none;
}

<page size="A4" style="">
    <table id="main_table" style="width: 100%;font-size: 14px;font-family: 'Roboto', sans-serif;border: 1px solid #000">
        <tbody><tr class="">
            <td style="text-align: left;width: 10.5cm;">
                <p style="margin-top: 0px; text-transform: uppercase"><b>GSTIN: 24AADFS1191D1ZH <br> PAN: AADFS1191F</b></p>
            </td>
            <td style="text-align: right;width: 10.5cm;">
                <p style="margin-top: 0px; text-transform: uppercase"><b>Original for buyer: white<br>Duplicate for transporter: pink<br>Triplicate for supplier: yellow</b></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <h4 style="text-align: center;font-weight: bold;font-size: 22px;margin: 0">SHRI AMBICA PLASTIC INDUSTRIES</h4>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <p style="text-align: center;font-weight: bold;font-size: 16px;margin: 0">MANUFECTURER OF : HDPE, LDPE, &amp; P.P. SHEETS TILES - TAPE &amp; BOARD</p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <p style="text-align: center;font-size: 14px;margin: 0">O/s Shahpur Gate. Ambica Bhavan, Nr. Fire Brigade, Ahmedabad-380 004. <b>Mobile : 98253 10444, 7878984567</b></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <p style="font-size: 14px;margin: 0"><b>Order No.:</b> <span class="editable Order_no mce-content-body" style="font-weight: bold; position: relative;" id="mce_0" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <h4 style="text-align: center;font-weight: bold;font-size: 22px;margin: 0">EXPORT INVOICE</h4>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <p style="text-align: center;font-size: 14px;margin: 0"><b>Supply Meant For Export Under Bond Or Letter Of Undertaking Without Payment Of Intergrated Tax (IGST)</b></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Invoice No: <span class="editable Invoice_no mce-content-body" style="font-weight: bold; position: relative;" id="mce_2" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
            <td style="text-align: left;width: 10.5cm;">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Transport Mode: <span class="editable Transport_mode mce-content-body" style="font-weight: bold; position: relative;" id="mce_3" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Invoice Date: <span class="editable Invoice_date mce-content-body" style="font-weight: bold; position: relative;" id="mce_4" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
            <td style="text-align: left;width: 10.5cm;">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Vehicle No.: <span class="editable Vehicle_no mce-content-body" style="font-weight: bold; position: relative;" id="mce_5" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <div style="float: left;width: 80%; border-right: 1px solid #000">
                    <p style="font-weight: bold;font-size: 14px;margin: 0">Reverse Chrage (Y/N): </p>
                </div>
                <div style="float: left;width: 18%;padding-left: 5px">
                    <span class="editable Reverse_charge mce-content-body" style="font-weight: bold; position: relative;" id="mce_6" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span>
                </div>
            </td>
            <td style="text-align: left;width: 10.5cm;">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Date of Supply: <span class="editable Supply_date mce-content-body" style="font-weight: bold; position: relative;" id="mce_7" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <div style="float: left;width: 50%; border-right: 1px solid #000">
                    <p style="font-weight: bold;font-size: 14px;margin: 0">State: <span class="editable State mce-content-body" style="font-weight: bold; position: relative;" id="mce_8" contenteditable="true" spellcheck="false">Gujarat</span></p>
                </div>
                <div style="float: left;width: 20%; border-right: 1px solid #000">
                    <p style="font-weight: bold;font-size: 14px;margin: 0 0 0 5px">HSN Code: </p>
                </div>
                <div style="float: left;width: 28%;padding-left: 5px">
                    <span class="editable HSN_Code mce-content-body" style="font-weight: bold; position: relative;" id="mce_9" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span>
                </div>
            </td>
            <td style="text-align: left;width: 10.5cm;">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Place of Supply: <span class="editable Supply_place mce-content-body" style="font-weight: bold; position: relative;" id="mce_10" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;height: 10px" colspan="2"></td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <p style="text-align: center;font-weight: bold;font-size: 14px;margin: 0">Bill to party: </p>
            </td>
            <td style="text-align: left;width: 10.5cm;padding-right: 0px">
                <p style="text-align: center;font-weight: bold;font-size: 14px;margin: 0">Ship to party: </p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Name: <span class="editable Bill_name mce-content-body" style="font-weight: bold; position: relative;" id="mce_11" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
            <td style="text-align: left;width: 10.5cm;padding-right: 0px">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Name: <span class="editable Ship_name mce-content-body" style="font-weight: bold; position: relative;" id="mce_12" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 5px" valign="top">
                <p style="font-weight: bold;font-size: 14px;margin: 0;min-height: 40px;text-align: justify;">Address: <span class="editable Bill_address mce-content-body" style="font-weight: bold; position: relative;" id="mce_13" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
            <td style="text-align: left;width: 10.5cm;padding-right: 5px" valign="top">
                <p style="font-weight: bold;font-size: 14px;margin: 0;min-height: 40px;text-align: justify;">Address: <span class="editable Ship_address mce-content-body" style="font-weight: bold; position: relative;" id="mce_14" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Country: <span class="editable Bill_country mce-content-body" style="font-weight: bold; position: relative;" id="mce_15" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
            <td style="text-align: left;width: 10.5cm;padding-right: 0px">
                <p style="font-weight: bold;font-size: 14px;margin: 0">Country: <span class="editable Ship_country mce-content-body" style="font-weight: bold; position: relative;" id="mce_16" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 21cm;height: 10px" colspan="2"></td>
        </tr>
        <tr class="">
            <td style="text-align: left;width: 21cm;" colspan="2">
                <table style="width: 100%" class="item_area">
                    <tbody><tr class="border_bottom heading_row">
                        <th style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 0;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">SR. No.</th>
                        <th style="width: 8.7cm;max-width: 8.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Product Description</th>
                        <th style="width: 1.8cm;max-width: 1.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">HSN</th>
                        <th style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">QTY</th>
                        <th style="width: 1.3cm;max-width: 1.3cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Rate</th>
                        <th style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Amount</th>
                        <th style="width: 0.8cm;max-width: 0.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Dis</th>
                        <th style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Taxable Value</th>
                        <th style="width: 2.5cm;max-width: 2.5cm;border: solid #000;border-width: 0 0 1px 1px;word-wrap: break-word;font-weight: bold;text-align: center;">
                            <table style="width: 100%">
                                <tbody><tr>
                                    <td colspan="2" style="padding: 2px 5px;">IGST</td>
                                </tr>
                                <tr>
                                    <td style="width: 0.75cm;max-width: 0.75cm;border-right: 1px solid #000; padding: 1px 2.5px;">Rate</td>
                                    <td style="width: 1.56cm;max-width: 1.46cm;padding: 1px 2.5px;">Amount</td>
                                </tr>
                                </tbody></table>
                        </th>
                        <th style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Total</th>
                    </tr>
                    <tr class="border_bottom total_row">
                        <td style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 0;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;"></td>
                        <td style="width: 8.7cm;max-width: 8.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Total</td>
                        <td style="width: 1.8cm;max-width: 1.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;"></td>
                        <td class="Total_Quantity" style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
                        <td style="width: 1.3cm;max-width: 1.3cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;"></td>
                        <td class="Total_Amount" style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
                        <td class="Total_Discount" style="width: 0.8cm;max-width: 0.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
                        <td class="Total_Taxable" style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
                        <td style="width: 2.5cm;max-width: 2.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">
                            <table style="width: 100%">
                                <tbody><tr>
                                    <td style="width: 0.75cm;max-width: 0.75cm;border-right: 1px solid #000; padding: 1px 2.5px;"></td>
                                    <td class="Total_IGST_Amount" style="width: 1.46cm;max-width: 1.46cm;padding: 1px 2.5px;">00</td>
                                </tr>
                                </tbody></table>
                        </td>
                        <td class="Total_Total" style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
                    </tr>
                    </tbody></table>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 12.6cm;border-right: 1px solid #000;padding-right: 0px">
                <p style="text-align: center;font-weight: bold;font-size: 14px;margin: 0">Total Invoice Amount In Word:</p>
            </td>
            <td style="text-align: left;width: 8.4cm;padding-right: 0px">
                <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Total Amount Before Tax: </p>
                </div>
                <div style="float: left;width: 25%;padding-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="TABT">00</p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;width: 12.6cm;border-right: 1px solid #000;padding-right: 0px" rowspan="3">
                <span class="amountinword" style="text-align: left;font-weight: bold;font-size: 14px;margin: 0"></span>
            </td>
            <td style="text-align: left;width: 8.4cm;border: solid #000;border-width: 0 0 1px 0;padding-right: 0px">
                <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Add.: IGST: </p>
                </div>
                <div style="float: left;width: 25%;padding-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="IGST">00</p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: left;width: 8.4cm;border: solid #000;border-width: 0 0 1px 0;padding-right: 0px">
                <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Total Tax Amount: </p>
                </div>
                <div style="float: left;width: 25%;padding-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="TTA">00</p>
                </div>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 8.4cm;padding-right: 0px; border-bottom: 0">
                <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Total Amount After Tax: </p>
                </div>
                <div style="float: left;width: 25%;padding-left: 5px">
                    <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="TAAT">00</p>
                </div>
            </td>
        </tr>
        <tr class="border_bottom">
            <td style="text-align: left;width: 12.6cm;padding-right: 0px; border: solid #000; border-width: 1px 1px 0 0">
                <table>
                    <tbody><tr>
                        <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
                            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank : HDFC Bank Ltd.</p>
                        </td>
                        <td style="text-align: left;width: 6.3cm;padding-right: 0px;text-align: center;border-bottom: 0" rowspan="4" valign="bottom">
                            <p style="font-weight: bold;font-size: 14px;padding: 10px 0 10px 0;border-top: 1px solid #000;margin: 0">Common Seal </p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
                            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank A/C : 50200003685662</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
                            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank IFSC : HDFC0000069</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;width: 6.3cm;padding-right: 5px; border-right: 1px solid #000;border-bottom: 0">
                            <p style="font-size: 12px;margin: 10PX 0 10PX 0; text-align: justify;"><b>TERMS:</b> <br> Interest @ 24% p.a. will be charged. if this invoice is not paid by the date. No. complaints in repsect of material supplied wide this invoice will be entertained unless the same is lodged in within 15 days of despatch Subject to Ahmedabad Jurisdiction.</p>
                        </td>
                    </tr>
                    </tbody></table>
            </td>
            <td style="position: relative; text-align: left;width: 8.4cm;padding-right: 0px; border: solid #000; border-width: 1px 0 0 0" valign="top">
                <table style="width: 100%">
                    <tbody><tr>
                        <td style="text-align: left;width: 8.4cm;padding-right: 0px">
                            <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
                                <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">GST On Reverse Charge: </p>
                            </div>
                            <div style="float: left;width: 25%;padding-left: 5px">
                                <span class="editable Reverse_GST mce-content-body" style="text-align: left; font-weight: bold; font-size: 14px; margin: 0px; width: 100%; position: relative;" id="mce_17" contenteditable="true" spellcheck="false">00</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;width: 8.4cm;padding-right: 0px;border: none">
                            <p style="text-align: center;font-size: 12px;margin: 7px 0 0 0">Certified that particular given above is true and correct</p>
                            <p style="text-align: center;font-size: 16px;margin: 3px 0 0 0">For, <b>SHRI AMBICA PLASTIC INDUSTRIES</b></p>
                            <p style="position: absolute; bottom: 0; width: 100%; text-align: center;font-size: 14px;margin: 3px 0 0 0">Authorised signatory</p>
                        </td>
                    </tr>
                    </tbody></table>
            </td>
        </tr>
        </tbody></table>
</page>
<div id="footer">
    <p style="text-align: center;line-height: 2px;">O/s Shahpur Gate. Ambica Bhavan, Nr. Fire Brigade, Ahmedabad-380 004</p>
    <p style="text-align: center;line-height: 2px;">Mobile : 98253 10444, 7878984567</p>
</div>

Answer 1

解决方案一

尝试添加 {page-break-after: always;}例如页脚 CSS。

该属性在指定元素后添加分页符。

方案二

通过将此添加到您希望网站中断的位置来控制您打印的内容:

<p style="page-break-before: always"></p>

示例当您尝试打印时，下面的代码将为您提供三页。

<html>
<body>

This is the text for page #1.

<p style="page-break-before: always"></p>

Page #2...

<p style="page-break-before: always"></p>

Page #3...

</body>
</html>