angular - 将 PrimeNG 数据表导出为 excel、pdf 和 xml

Question

PrimeNG DataTable 具有将数据导出到 CSV 文件的功能。我需要提供将数据导出到 Excel、PDF 和 XML 的功能。我怎样才能在我的 Angular2 应用程序中实现这一点？

Answer 1

PrimeNg 本身不支持数据表到 CSV 的任何内容。因此，您需要“从头开始”构建此功能。

一个好的方法是这样的:

1. 您的组件中的对象中已经有您的数据。这将是您在数据表中传递的对象，如下所示:

   <p-dataTable [value]="cars">

   所以我们的数据在汽车对象。在您的组件中，您可以使用

   this.cars

2. 下一步是向您的数据表标题或适合您设计的任何其他部分添加一个按钮，该按钮将读取“下载 pdf”行中的内容。像这样:

   <p-button label="Click to download PDF" styleClass="ui-button-info" (click)="download()"></p-button>

   这将在单击时调用组件中的下载方法

3. 最后，在下载方法中，您需要将数据转换为 PDF 或您需要的任何其他格式。这可以使用许多在线库之一轻松完成，例如 PDF : jsPDF 。可以在此处找到带 Angular 工作示例: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');