如何在 Angular 6 分页的表格中打印记录。（所有记录不仅是当前页面）答案

【问题标题】：How to print records in a table with pagination in angular 6.(All the records not only the current page)如何在 Angular 6 分页的表格中打印记录。（所有记录不仅是当前页面）
【发布时间】：2019-12-27 14:02:50
【问题描述】：

我正在从后端获取记录，并在 UI 上的带有 pagination 的表中对其进行处理。

我还有一个打印按钮，需要打印表格中的所有记录。

但是当我打印时，它只打印我所在的页面。

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")'/>

【问题讨论】：

标签： javascript html angular angular6

【解决方案1】：

在 HTML 中，您将“printareaDiv”作为参数传递给 onPreviewClick() 函数，并将此参数作为 Id 来查找 HTML 元素。但是在您的 HTML 中没有 id 为“printareaDiv”的元素。您所指的表具有不同的 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);
};
}

要打印所有表格数据忽略分页，请查看以下代码

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 表格并将其隐藏，获取 id 或使用 ViewChild 装饰器来识别表格并打印。

【讨论】：

它仍然显示我所在页面的数据。无论分页和 currentPage ，我都需要打印所有记录。
PrintContent ID 仍然只包含 UI 中的表格数据（即我所在的页面）> 在我的 HTML 中我已经完成了分页（请看一下）@Sijil
如果要打印完整的表格，最好在这个函数中生成完整的表格。我已经编辑了页面，请看一下。
感谢您的帮助。但实际上，当我们单击 clt+P（打印页面）时，我需要一个 UI，并且该页面应该包含所有被过滤的数据。不是另一个没有数据打印选项的窗口。 :(