如何打印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.