web-dev-qa-db-fra.com

Angular exportation côté client Excel

J'utilise Angular v4. Comment puis-je créer un tableur Excel à partir d'un objet dans un composant? J'ai besoin de télécharger le fichier Excel en un clic et je dois faire ce côté client. J'ai un fichier JSON composé de tableaux et je dois le transférer sur un fichier Excel, éventuellement personnalisable. C'est possible? Si oui comment?

Edit: Pas de bibliothèques js, veuillez le faire avec TypeScript et Angular

excelangulartypescript
4
Gianluca Paris

yourdata = jsonData

ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
              var str = '';
            var row = "";

            for (var index in objArray[0]) {
                //Now convert each value to string and comma-separated
                row += index + ',';
            }
            row = row.slice(0, -1);
            //append Label row with line break
            str += row + '\r\n';

            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    if (line != '') line += ','

                    line += array[i][index];
                }
                str += line + '\r\n';
            }
            return str;
        }

dans votre html:

<button (click)="download()">export to Excel</button>

en composant:

download(){    
 var csvData = this.ConvertToCSV(yourdata);
                        var a = document.createElement("a");
                        a.setAttribute('style', 'display:none;');
                        document.body.appendChild(a);
                        var blob = new Blob([csvData], { type: 'text/csv' });
                        var url= window.URL.createObjectURL(blob);
                        a.href = url;
                        a.download = 'User_Results.csv';/* your file name*/
                        a.click();
                        return 'success';
}

J'espère que ça vous aidera

15
paruvelly Vishwanath

Vous ne pouvez pas aimer cette réponse en fonction de vos besoins; Cependant, sans bibliothèque JS, vous réinventez la roue. Personnellement, j’ai trouvé les formats Excel XML époustouflants. Avec la bibliothèque ci-dessous (appelable depuis Angular), vous pouvez bénéficier du travail déjà effectué à cet égard. 

Votre conception se compose de deux parties: le téléchargement et l’ouverture/la modification du contenu. Angular n’est pas associé à Angular n’est que le conteneur permettant d’effectuer le travail. 

  1. Rechercher comment télécharger des fichiers dans Angular
  2. Une fois le téléchargement terminé et que le fichier est maintenant "local", ouvrez-le à l’aide de quelque chose comme cela
1
John Peters

La réponse de Vishwanath a fonctionné pour moi lorsque j'ai remplacé "," par ";". Dans TypeScript, l'implémentation pourrait ressembler à ceci:

ConvertToCSV(objArray: any) {
    const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    let row = '';

    for (const index of Object.keys(objArray[0])) {
      row += `${index};`;
    }
    row = row.slice(0, -1);
    str += `${row}\r\n`;

    for (let i = 0; i < array.length; i++) {
      let line = '';
      for (const index of Object.keys(array[i])) {
        if (line !== '') {
          line += ';';
        }
        line += array[i][index];
      }
      str += `${line}\r\n`;
    }
    return str;
  }

J'espère que ça aidera quelqu'un.

0
user3588429

Je pense que vous ne le ferez pas sans les bibliothèques Js en arrière-plan. Ce dont vous avez besoin, ce sont les typographies nécessaires à son utilisation dans votre projet Angular avec TypeScript.  

Pour créer un fichier Excel, vous pouvez utiliser quelque chose comme exceljs . Pour l'utiliser dans votre projet, installez également les types de saisie que vous pouvez trouver ici . Je ne suis pas sûr si cette bibliothèque convient ... je ne l'ai pas utilisée auparavant.

Pour le téléchargement, vous devez utiliser FileSaver.js (je l’ai déjà utilisé). 

npm install file-saver --save

... et les tapages:

npm install @types/file-saver --save-dev

Pour utiliser FileSaver.js, importez l’élément suivant dans votre composant:

import * as FileSaver from 'file-saver';

Pour déclencher le téléchargement, utilisez ceci:

FileSaver.saveAs(fileData, "filename.xlsx")

'fileData' doit être un blob.

Espérons que cela aide un peu.

0
Ludwig

ce n'est pas possible.

XLS est un format binaire.

Le projet Apache POI ( https://en.wikipedia.org/wiki/Apache_POI ) nomme la classe sous le nom HSSF (Horrible SpreadSheet Format).

ma recommandation, faites-le côté serveur.

0
Adriano Moreira