javascript - 如何使用 JavaScript 创建用于打印的表格设计

Question

我在循环的帮助下打印了所有表格。但是在打印时，第二个表格的一半落在了第一个表格的页面上。请看照片。我希望每张表都打印在一页上

我在循环的帮助下打印了所有表格。但是在打印时，第二个表格的一半落在了第一个表格的页面上。请看照片。我希望每张表都打印在一页上

<table class="table table-bordered border-dark print-table" style="font-size:14px"  dir="rtl">

    <tr>

        <td colspan="2"><img src="~/img/vira.png" height="75px" width="80px" /> </td>
        <td colspan="2" style="font-size:14px">فیش حقوقی و تسویه حساب پرسنل <br /> @item.projectName</td>
        <td colspan="2">فیش حقوقی @item.month ماه @item.yeur </td>

    </tr>


    <tbody class="bg-white ">
        <tr>

            <td colspan="2" class="table-borderless" style="font-size:12px">نام و نام خانوادگی : @item.PersonName @item.PersonFamily</td>
            <td colspan="2" class="">کد پرسنلی : @item.PersonleCode</td>
            <td colspan="2" class="ml-3">کد ملی : @item.PersonCode</td>

        </tr>


        <tr class=" table-warning">
            <td>اطلاعات پایه</td>
            <td>کارکرد</td>
            <td>حقوق مزایا</td>
            <td>مبلغ (ریال)</td>
            <td>کسورات</td>
            <td>مبلغ (ریال)</td>
        </tr>


        <tr class="table-secondary text-center">

            <td colspan="1">جمع پرداختی</td>
            <td colspan="2">@item.TotalPayment.ToString(numSpace) (ریال)</td>
            <td colspan="1">جمع کسورات</td>
            <td colspan="2">@item.TotalKosorat.ToString(numSpace) (ریال)</td>

        </tr>
        <tr>

            <td colspan="3"> خالص پرداختی</td>
            <td colspan="3">@item.TotalPayable.ToString(numSpace) (ریال)</td>

        </tr>


    </tbody>

</table>

<script>

    function printDiv() {
        var divToPrint = document.querySelectorAll('.print-table');
        var htmlToPrint = '' +
            '<style type="text/css">' +
            'table th, table td {' +
            'font-family:vazir;' +
            'border:1px solid #000;' +
            'text-align:center;' +
            'padding:0.5em;' +
            '}' +
            '</style>';

        divToPrint.forEach((item) => {
            htmlToPrint += item.outerHTML;
        })
        newWin = window.open("");
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
    }

</script>

标签： javascriptcssasp.net-core