Печать таблиц внутри цикла с помощью JavaScript

avatar
sadegh farest
9 августа 2021 в 07:11
219
2
0

Я хочу распечатать все таблицы в цикле с помощью одной кнопки. Этот мой код печатает только одну таблицу, пожалуйста, помогите мне.

Я хочу распечатать все таблицы в цикле с помощью одной кнопки Этот мой код распечатывает только одну таблицу, пожалуйста, помогите мне.

Я хочу распечатать все таблицы в цикле с помощью одной кнопки Этот мой код распечатывает только одну таблицу, пожалуйста, помогите мне.

С помощью JavaScript

enter image description here

<input type="submit" value="چاپ فیش" onclick="printDiv()" class="btn btn-outline-info">

@foreach (var item in Model)
{

    <div class=" bg-white mb-5">

        <table class="table table-bordered border-dark" style="font-size:14px" id="table" 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>


                </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>


    </div>


    <script>


        function printDiv() {
            var divToPrint = document.getElementById('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>';
            htmlToPrint += divToPrint.outerHTML;
            newWin = window.open("");
            newWin.document.write(htmlToPrint);
            newWin.print();
            newWin.close();
        }

    </script>

Источник

Ответы (2)

avatar
brk
9 августа 2021 в 07:23
2

Проблема с этой строкой <table class="table table-bordered border-dark" style="font-size:14px" id="table" dir="rtl">.

Все таблицы будут иметь один и тот же id, что является недопустимым html.

Вместо id рассмотрите возможность добавления общего class ко всем таблицам, например

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

Затем получить всю таблицу, используя класс

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();
}

Примечание: вы можете добавить @print в файл css вместо добавления тега стиля

sadegh farest
9 августа 2021 в 07:41
0

Спасибо, ответ был правильным, но я хочу, чтобы каждая таблица была на одной странице. В этом ответе половина второй таблицы приходится на первую страницу. Пожалуйста, помогите мне

avatar
truejasonxiefans
9 августа 2021 в 07:26
0

как и сказал @brk, вы можете использовать var divToPrint= document.getElementsByTagName('table')