css - Typescript - CSS 打印设置 - Break Div

Question

我window.print用于在 Angular 9 中生成打印窗口。如果它会中断，我想将其推div送到下一页，如下图所示。

用于此的 HTML 如下：

<div class="card mt-2" *ngFor="let data of ledgerData">
    <div class="card-header">
        <div class="row">
            <div class="col-12 text-left">
                [{{ data.code | Accountcode}}] <b>{{ data.codedesc }}</b>
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-right">
                Opening Balance: PKR {{ data.opening | Numberwithcommas }}
                <br>
                Closing Balance: PKR {{ data.closing | Numberwithcommas }}
            </div>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-striped">
            <thead>
                <th>Date</th>
                <th>Type</th>
                <th>No.</th>
                <th>Description</th>
                <th>Debit</th>
                <th>Credit</th>
                <th>Balance</th>
            </thead>
            <tbody>
                <tr *ngFor="let entry of data.enteries">
                    <td>{{ entry.voucherdate }}</td>
                    <td>{{ entry.vouchertype }}</td>
                    <td>{{ entry.vouchernumber }}</td>
                    <td>{{ entry.description }}</td>
                    <td>{{ entry.debit | Numberwithcommas }}</td>
                    <td>{{ entry.credit | Numberwithcommas }}</td>
                    <td>{{ entry.balance | Numberwithcommas }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

请建议我如何将 div 推送到下一页？