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

时间:2016-12-22 23:26:05

标签: angular primeng

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

1 个答案:

答案 0 :(得分:0)

PrimeNg本身不支持比datatable更多的数据。因此,您需要从" scratch"。

构建此功能

一个好的方法是这样的:

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

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

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

    访问它

    this.cars

  2. 下一步是添加到您的数据表标题或适合您设计的任何其他部分中的按钮,该按钮将读取&#34;下载pdf&#34; 。像这样:

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

    这将在单击

  3. 时调用组件中的方法下载
  4. 最后,在下载方法中,您需要将数据转换为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');