web-dev-qa-db-fra.com

Créez un fichier Excel avec quelques styles en utilisant JavaScript côté client (si possible en utilisant la bibliothèque js-xlsx)

Je souhaite créer un fichier Excel (au format.xlsx) et le rendre disponible pour le téléchargement à l'aide de JavaScript côté client . J'ai pu créer un exemple de fichier en utilisantjs-xlsxlibrary. Mais je ne peux pas appliquer de styles à cela. Au moins certains styles de base, y compriscouleur d'arrière-planen-tête,police en graspour en-tête ethabillage du textepour les cellules sont nécessaires.

js-xlsx la documentation de la bibliothèque indique que nous pouvons donner des styles en utilisant Cell Object .

J'ai essayé de donner des styles en utilisant l'objet cell mais cela ne se reflète pas dans le fichier .xlsx téléchargé. J'ai même essayé de lire un fichier .xlsx et de réécrire le même fichier avec XLSX.write () function. Mais cela restitue un fichier Excel sans aucun style. Idéalement, le fichier téléchargé devrait avoir les mêmes styles que le fichier téléchargé. Aucune couleur de police ou de couleur d'arrière-plan n'a été appliquée dans le fichier recréé. J'utiliseExcel 2013pour tester les fichiers téléchargés.

Veuillez trouver ci-dessous les captures d'écran Excel avant et après le téléchargement.

Fichier d'origine

 enter image description here

Fichier téléchargé

 enter image description here

Le code est donné ci-dessous.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>

<script>

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}   

/* set up XMLHttpRequest */
var url = "template-sample.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(e) {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, {type:"binary", cellStyles:true});

    console.log("read workbook");
    console.log(workbook);
  /* DO SOMETHING WITH workbook HERE */
    var wbout = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', cellStyles: true});
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "template-download.xlsx");

}

function read(){
    oReq.send();    
}


</script>


</head>
<body>
    <button onclick="read()">save xlsx</button>
</body></html>

Le code de l'échantillon a été pris de ici .

Ce que je recherche, c’est soit une option permettant de donner des styles aux cellules à l’aide de js-xlsx bibliothèque, soit une autre bibliothèque fournissant cette fonctionnalité. J'ai trouvé une bibliothèque appelée exceljs , mais elle nécessitenoeud jspour la prendre en charge. Je recherche une solution purement client. Ceci doit être utilisé pour une application pour tablette et bureau basée surCordova.

javascriptexcelcordovajs-xlsx
13
Nithin Baby

Après quelques recherches, j'ai pu trouver la solution à ma propre question ... J'ai trouvé une nouvelle bibliothèque appelée xlsx-style pour donner des styles. xlsx-style est construit à partir de js-xlsx pour donner également des styles au fichier Excel généré. Les styles peuvent être attribués aux cellules à l'aide d'un nouvel attribut à l'intérieur de l'objet cellule.

L'explication est disponible à la page npm xlsx style .

Le style est donné à l'aide d'un objet de style associé à chaque cellule. La police, la couleur, l'alignement, etc. peuvent être définis à l'aide de cet objet style. 

J'ai ajouté une démo minimaliste dans une page github . L'exemple de code est disponible dans ce répertoire github .

Vous pouvez trouver la capture d'écran de la page Excel générée ci-dessous .  enter image description here

15
Nithin Baby

Utilisez xlsx-style , pour chaque collection 'WorkSheet' et ajoutez le style avant d’ajouter dans 'WorkBook'. La propriété responsable de ce processus est le 's' (style).

Échantillon:

_.forEach(ws, (v, c) => {
    if (c !== '!ref') {
        if (header.indexOf(v.v) >= 0) {
            ws[c]['s'] = {
                fill: {
                patternType: 'solid', // none / solid
                fgColor: {rgb: 'FFD3D3D3'}
                }
            }
        }
    }
})
0
Darlan Dieterich