如何在角度为6的分页中打印表中的记录（所有记录不仅限于当前页面）

Arpan 发表于 Dev

阿尔潘

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

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

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

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'的元素。您所引用的表具有不同的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装饰器来标识该表并进行打印。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。