如何使用javascript打印ngx datatable(或html datatable)所有列?

时间:2019-02-05 09:15:09

标签: javascript html angular7 ngx-datatable

实际上我的桌子上有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>

为我提供答案,该答案将打印所有表格列,并且如果我已经打印了一次,那么如果我想下次打印而不刷新浏览器。

0 个答案:

没有答案