如何打印table中的记录并在angular中分页 6.(所有记录不仅是当前页)
How to print records in a table with pagination in angular 6.(All the records not only the current page)
我正在从后端获取记录并使用分页在 table 中的 UI 上对其进行处理。
我还有一个打印按钮,需要打印table中的所有记录。
但是当我打印时它只打印我所在的页面。
my.ts 文件。
onPreviewClick(e){
console.log(e);
let printContents = document.getElementById(e).innerHTML;
// var printContents = this. filteredDataAfterDate;
var originalContents = document.body.innerHTML;
console.log(e, printContents, originalContents);
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
HTML :
<pagination-controls (pageChange)="p = $event"></pagination-controls>
<button (click)='omProceedClick($event)'type=”button”>Button</button>
<div >
<ul>
<li *ngFor="let a of totalDate; let index = index"> {{ a }}</li>
</ul>
</div>
<div id="printareaDiv">
<table style="width:80%" id="printarea">
<tr>
<th>Date</th>
<th>ApplicationStatus</th>
<th>SubmittedBy</th>
</tr>
<tr *ngFor="let a of filteredDataAfterDate | paginate: { itemsPerPage: 1, currentPage: p }; let index = index">
<td>{{a.Date}}</td>
<td>{{a.ApplicationStatus}}</td>
<td>{{a.SubmittedBy}}</td>
</tr>
</table>
</div>
<input type="button" value="Print Preview" class="btn" (click)='onPreviewClick("printareaDiv")'/>
在 HTML 中,您将 'printareaDiv' 作为参数传递给 onPreviewClick() 函数,并将此参数作为 Id 来查找 HTML 元素。但是在您的 HTML 中没有 ID 为 'printareaDiv' 的元素。您所指的 table 具有不同的 ID,即 'printarea'.
你可以这样写:
function onPreview(e){
const printContents = document.getElementById(e).innerHTML
const WindowObject = window.open('','PrintWindow','width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes'
);
const htmlData = `<html><body>${printContents}</body></html>`;
WindowObject.document.writeln(htmlData);
WindowObject.document.close();
WindowObject.focus();
setTimeout(() => {
WindowObject.close();
}, 0.5);
};
}
要忽略分页打印所有 table 数据,请查看以下代码
function onPreview(){
let printContents = '';
const WindowObject = window.open('','PrintWindow','width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes'
);
printContents += `<table>
<tr>
<th>Date</th>
<th>ApplicationStatus</th>
<th>SubmittedBy</th>
</tr>`;
filteredDataAfterDate.map(data => {
printContents += `<tr>
<td>${data.Date}</td>
<td>${data.ApplicationStatus}</td>
<td>${data.SubmittedBy}</td>
</tr>`;
const htmlData = `<html><body>${printContents}</body></html>`;
WindowObject.document.writeln(htmlData);
WindowObject.document.close();
WindowObject.focus();
setTimeout(() => {
WindowObject.close();
}, 0.5);
};
}
除此之外,您可以在 html 文件中创建一个 html table 而无需分页,然后将其隐藏,获取 id 或使用 ViewChild 装饰器来识别 table 并给出 print.
我正在从后端获取记录并使用分页在 table 中的 UI 上对其进行处理。
我还有一个打印按钮,需要打印table中的所有记录。
但是当我打印时它只打印我所在的页面。
my.ts 文件。
onPreviewClick(e){
console.log(e);
let printContents = document.getElementById(e).innerHTML;
// var printContents = this. filteredDataAfterDate;
var originalContents = document.body.innerHTML;
console.log(e, printContents, originalContents);
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
HTML :
<pagination-controls (pageChange)="p = $event"></pagination-controls>
<button (click)='omProceedClick($event)'type=”button”>Button</button>
<div >
<ul>
<li *ngFor="let a of totalDate; let index = index"> {{ a }}</li>
</ul>
</div>
<div id="printareaDiv">
<table style="width:80%" id="printarea">
<tr>
<th>Date</th>
<th>ApplicationStatus</th>
<th>SubmittedBy</th>
</tr>
<tr *ngFor="let a of filteredDataAfterDate | paginate: { itemsPerPage: 1, currentPage: p }; let index = index">
<td>{{a.Date}}</td>
<td>{{a.ApplicationStatus}}</td>
<td>{{a.SubmittedBy}}</td>
</tr>
</table>
</div>
<input type="button" value="Print Preview" class="btn" (click)='onPreviewClick("printareaDiv")'/>
在 HTML 中,您将 'printareaDiv' 作为参数传递给 onPreviewClick() 函数,并将此参数作为 Id 来查找 HTML 元素。但是在您的 HTML 中没有 ID 为 'printareaDiv' 的元素。您所指的 table 具有不同的 ID,即 'printarea'.
你可以这样写:
function onPreview(e){
const printContents = document.getElementById(e).innerHTML
const WindowObject = window.open('','PrintWindow','width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes'
);
const htmlData = `<html><body>${printContents}</body></html>`;
WindowObject.document.writeln(htmlData);
WindowObject.document.close();
WindowObject.focus();
setTimeout(() => {
WindowObject.close();
}, 0.5);
};
}
要忽略分页打印所有 table 数据,请查看以下代码
function onPreview(){
let printContents = '';
const WindowObject = window.open('','PrintWindow','width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes'
);
printContents += `<table>
<tr>
<th>Date</th>
<th>ApplicationStatus</th>
<th>SubmittedBy</th>
</tr>`;
filteredDataAfterDate.map(data => {
printContents += `<tr>
<td>${data.Date}</td>
<td>${data.ApplicationStatus}</td>
<td>${data.SubmittedBy}</td>
</tr>`;
const htmlData = `<html><body>${printContents}</body></html>`;
WindowObject.document.writeln(htmlData);
WindowObject.document.close();
WindowObject.focus();
setTimeout(() => {
WindowObject.close();
}, 0.5);
};
}
除此之外,您可以在 html 文件中创建一个 html table 而无需分页,然后将其隐藏,获取 id 或使用 ViewChild 装饰器来识别 table 并给出 print.