将PrimeNG DataTable导出为ex cel,pdf和xml

问题描述 投票:5回答:1

PrimeNG DataTable具有将数据导出到CSV文件的功能。我需要提供将数据导出到Excel,PDF和XML的功能。如何在Angular2应用程序中实现这一目标?

angular primeng
1个回答
0
投票

PrimeNg本身不支持除CSV数据之外的任何内容。所以你需要从“scratch”构建这个功能。

一个好的方法是这样的:

  1. 您已将数据存储在组件中的对象中。这将是您在数据表中传递的对象,如下所示: <p-dataTable [value]="cars"> 所以我们的数据是汽车对象。在您的组件中,您可以使用它来访问它 this.cars
  2. 下一步是添加到您的数据表头或适合您设计的任何其他部分中的按钮,该按钮将读取“download pdf”行中的内容。像这样的东西: <p-button label="Click to download PDF" styleClass="ui-button-info" (click)="download()"></p-button> 这将在单击时调用组件中的方法下载
  3. 最后,在下载方法中,您需要将数据转换为PDF或您需要的任何其他格式。这可以使用众多在线库中的一个轻松完成,例如PDF:jsPDF。有角度的工作示例可以在这里找到:plunker example jsPDF angular4。所以在我们的代码中我们有下载函数: let doc = new jsPDF(); let col = ["Details", "Values"]; let rows = []; for(let key in this.cars){ let temp = [key, item[key]]; rows.push(temp); } doc.autoTable(col, rows); doc.save('Test.pdf');
© www.soinside.com 2019 - 2024. All rights reserved.