web-dev-qa-db-fra.com

Exporter vers Excel sur Angular 4

J'ai un tableau de données rempli dynamiquement à l'aide de Angular 4. J'aimerais exporter le tableau vers Excel. Comment puis-je atteindre cet objectif dans Angular 4. Je cherche.

PS: Je ne veux pas utiliser les bibliothèques Jquery. 

Mon composant app ressemble à ceci,

    <table id ="dataTable" class = "table table-hover">
  <thead>
      <tr>
          <th>Date</th>
          <th>Address</th>
          <th>Mode</th>
          <th>Distance</th>
          <th>Fare</th>
          <th></th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let date of dateList;let i = index">
          <td>{{date}}</td> 
          <td>{{address}}</td>
          <td>{{mode}}</td>
          <td>{{distance}}</td>
          <td>{{fare}}</td>
          <td>
             <a>Delete</a>
          </td>   
      </tr>
  </tbody>
</table>

Merci d'avance pour votre aide

excelangular
11
Rohit

Vous pouvez utiliser XLSX pour exporter vers Excel.

Il supportera json ou array dans Excel.

Exemple de code

import * as XLSX from 'xlsx';

public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
this.saveAsExcelFile(excelBuffer, excelFileName);
}

Pour économiser

private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], {
  type: Excel_TYPE
});
var today = new Date();
var date = today.getFullYear() + '' + (today.getMonth() + 1) + '' + today.getDate() + '_';
var time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
var name = fileName + date + time;
FileSaver.saveAs(data, name + Excel_EXTENSION);
}

Référence pour Angular 2+

Xlsx pour angular 2+

8
shajan

Pour ceux qui recherchent encore une réponse efficace.

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.myDataModels);
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
    /* save to file */
    XLSX.writeFile(wb, this.createFileName());

Cela enregistrera automatiquement sous forme de fichier xlsxObtenir cela de https://github.com/SheetJS/js-xlsx/tree/19620da30be2a7d9b19801938a0b9f13d4c4b00/demos/angular2

4
Abx

Vous pouvez uniquement utiliser la bibliothèque xlsx pour écrire et enregistrer un fichier Excel en même temps à l'aide de XLSX.writeFile().

exportExcel(data: any[]){
   const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
   const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
   XLSX.writeFile(workbook, 'my_file.xls', { bookType: 'xls', type: 'buffer' });
}
1
SlimenTN

Il semble que Microsoft fournisse un plugin Javascript, utilisable avec Angular, here

0
David F.