实际上我的桌子上有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>
为我提供答案,该答案将打印所有表格列,并且如果我已经打印了一次,那么如果我想下次打印而不刷新浏览器。