Как распечатать всю таблицу из представления в MVC

#jquery #asp.net-mvc #django-views

Вопрос:

Я поиграл с различными функциями и сумел распечатать одну строку , но мне нужно аккуратно распечатать всю таблицу, пожалуйста, помогите, я новичок в MVC. Есть ли способ исправить мою текущую функцию или совершенно новую функцию, которая будет печатать таблицу?

Сценарии, которые я использую (я пробовал разные методы)

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="assets/js/jquery-1.9.1.js"></script>
    <script src="assets/js/printThis.js"></script>     
 

МОЙ СТОЛ В МОЕМ ПРЕДСТАВЛЕНИИ

  <table id="tableData" width="100%" border="1" frame="box" rules="all" cellpadding="2">
                    <tr>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Grade</th>
                        <th scope="col">Class</th>
                    </tr>

                    <tbody>
                        @foreach (var item in Model)
                        {
            <tr>
                <td hidden>
                    @Html.DisplayFor(modelItem => item.Student.StudentID)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.Student.Student_Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Student.Student_Lastname)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Grade.Grade_Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Class.Class_Name)
                </td>
                <td>

                    <button class="btn btn-dark" style="color:white">@Html.ActionLink("Edit", "UpdateStudent", new { id = item.StudentID }, new { @style = "color:white;" })</button>
                    <button class="btn btn-dark">@Html.ActionLink("Delete", "Delete", new { id = item.CurrentYearStudentID }, new { @style = "color:white;" })</button>
                
            </tr>}
 

Моя Пуговица

  <button ID="Button1" runat="server" OnClientClick="printTbl()">Print Table</button>
          

   
 

`Функция печати, я пытаюсь

       <script language="javascript" type ="text/javascript" >
    function printTbl() {
        var TableToPrint = document.getElementById('TableData');
        newWin = window.open("");
        newWin.document.write(TableToPrint.outerHTML);
        newWin.print();
        newWin.close();
    }
</script>
 

Комментарии:

1. Вам следует рассмотреть возможность использования таблиц данных и фреймворка Django Rest.