PrimeNG DataTable in Excel, PDF und XML exportieren

Question

PrimeNG DataTable verfügt über eine Funktion zum Exportieren der Daten in eine CSV-Datei. Ich muss Funktionalität zur Verfügung stellen, um die Daten in Excel, PDF und XML zu exportieren. Wie kann ich dies in meiner Angular2-Anwendung erreichen?

Answer 1

PrimeNg unterstützt nativ nicht mehr als eine Datentabelle im CSV-Format. Also müssen Sie diese Funktionalität von "Scratch" erstellen.

Ein guter Ansatz würde wie folgt sein:

1. Sie Ihre Daten in einem Objekt bereits in Ihrem compoment haben. Dies wäre das Objekt, das Sie in Ihrer Datentabelle wie folgt passieren:

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

   so unsere Daten an den Autos Objekt ist. Zu Ihren compoment können Sie sie mit Zugang

   this.cars

2. Den nächsten Schritt hinzuzufügen wäre entweder zu Ihren Datatable-Header oder in einem anderen Teil, der Ihr Design paßt eine Schaltfläche, die etwas in den Zeilen "lesen würde PDF Herunterladen" . Etwas wie folgt aus:

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

   dies die Methode Download in Ihrer Komponente aufrufen, wenn

3. schließlich auf der Download-Methode Sie Ihre Daten in PDF konvertieren müssen geklickt oder was auch immer andere Format, das Sie brauchen. Dies kann einfach mit einer der vielen Bibliotheken online durchgeführt werden, zum Beispiel für PDF: jsPDF. Ein Arbeitsbeispiel mit Winkel finden Sie hier: plunker example jsPDF angular4. Also in unserem Code haben wir in der Download-Funktion:

   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');