Как напечатать ngx datatable (или html datatable) все столбцы, используя JavaScript? - PullRequest
0 голосов
/ 05 февраля 2019

На самом деле у меня в таблице 12 столбцов, но только 4 напечатанных столбца.Кроме того, моя функция печати работает, только если мой браузер обновлен, иначе это невозможно. Когда я попытался напечатать таблицу в следующий раз без обновления браузера, тогда функция печати не работала.Ниже я упомянул код ...

это моя функция печати в файле component.ts

print(id) {   
    console.log(id);
    if(document.getElementById(id) != null){
      var printContents = document.getElementById(id).innerHTML;
      var originalContents = document.body.innerHTML;
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    }
    window.close(); 


  }

и в моем компоненте .html

 <div class="table-responsive" id ="dataTable"  *ngIf="studentreport">
            <table class ="table" >
               <h3 class = "text-center panel-heading bg-primary"> Student Report</h3>
              <br>
              <ngx-datatable  class="material expandable" [rows]="rows" expanded="expanded" [sortType]="'multi'" [columnMode]="'force'" [headerHeight]="50"
                [footerHeight]="50" [rowHeight]="'auto'">

                <ngx-datatable-column name="ID" prop="id">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template>{{value}}</ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Adm No" prop="admission_no">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                  </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Name" prop="name">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Course" prop="course">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Batch" prop="batch">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Contact No" prop="phone.number" *ngIf ="!phonenumber">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>


                <ngx-datatable-column name="Class" prop="class">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="permanent Address" prop="address_detail.address" *ngIf = "!address">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Temporary Address" prop="temporary_address" *ngIf="!address">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                  </ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Gurdian Name" prop="guardian_details.name" *ngIf="!gurdiandetail">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                 </ng-template>
                </ngx-datatable-column>

               <ngx-datatable-column name="Gurdian Address" prop="guardian_details.address.address" *ngIf="!gurdiandetail">
                <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
               </ng-template>
              </ngx-datatable-column>

            <ngx-datatable-column name="Gurdian Contact" prop="guardian_details.contact.number" *ngIf="!gurdiandetail">
              <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Father Name" prop="parent_details.father.name" *ngIf="!parentsdetail">
              <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Mother Name" prop="parent_details.mother.name" *ngIf="!parentsdetail">
              <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Father Contact" prop="parent_details.father.mobile" *ngIf="!parentsdetail">
              <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
             </ng-template>
            </ngx-datatable-column>


            <ngx-datatable-column name="Mother Contact" prop="parent_details.mother.mobile" *ngIf="!parentsdetail">
              <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
             </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Amount" prop="amount" *ngIf="!amount">
              <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
              </ng-template>
            </ngx-datatable-column>

                <ngx-datatable-column name="Email" prop="email"*ngIf="!email">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template>{{value}}</ng-template>
                </ngx-datatable-column>

                <ngx-datatable-column name="Admission Date" prop="admission_date">
                  <ng-template let-column="column" ngx-datatable-header-template>{{column.name}}</ng-template>
                  <ng-template let-value="value" ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">{{value}}
                  </ng-template>
                </ngx-datatable-column>

              </ngx-datatable>
          </table>
        </div>

guideя с вашим ответом, который печатает все столбцы таблицы, а также, если я напечатал уже один раз, если я хочу печатать в следующий раз без обновления браузера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...