Créer un fichier excel avec un peu de styles à l'aide de code JavaScript coté client (si possible en utilisant js-xlsx bibliothèque)

Je veux créer un fichier excel(en .xlsx format) et le rendre disponible pour téléchargement à l'aide de Côté Client JavaScript. J'ai été en mesure de créer un exemple de fichier à l'aide de js-xlsx de la bibliothèque. Mais je ne suis pas en mesure d'appliquer tous les styles. Au moins quelques styles différents, y compris couleur d'arrière-plan à en-tête, gras d'en-tête et de l'habillage de texte pour les cellules sont nécessaires.

js-xlsx de la bibliothèque de documentation dit que nous pouvons donner de styles à l'aide de Objet De Cellule.

J'ai essayé de donner des styles à l'aide de la cellule de l'objet, mais il ne reflète pas le téléchargé .fichier xlsx. J'ai même essayé de lire un .fichier xlsx et d'écrire le même fichier à l'aide de XLSX.write() fonction. Mais il donne en retour un fichier excel avec aucun style. Idéalement, j'attends le fichier téléchargé pour avoir les mêmes styles de fichier téléchargé. Pas de la couleur de la police ou des couleurs d'arrière-plan ont été appliquées dans le recréé le fichier. J'utilise Excel 2013 pour tester les fichiers téléchargés.

Veuillez trouver ci-dessous les excel des captures d'écran avant et après le chargement.

Fichier D'Origine

Créer un fichier excel avec un peu de styles à l'aide de code JavaScript coté client (si possible en utilisant js-xlsx bibliothèque)

Fichier Téléchargé

Créer un fichier excel avec un peu de styles à l'aide de code JavaScript coté client (si possible en utilisant js-xlsx bibliothèque)

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>

Exemple de code a été prise à partir de ici.

À quoi j'aspire est soit une option pour donner des styles de cellules à l'aide de js-xlsx bibliothèque ou d'une autre bibliothèque qui fournit cette fonctionnalité. J'ai trouvé une bibliothèque nommée exceljs , mais il nécessite node js pour la soutenir. Je suis à la recherche d'un purement côté client en fonction de la solution. C'est pour être utilisé pour un Cordova tablette et l'application de bureau.

Pour le téléchargement de fichier excel sans l'aide de n'importe quelle bibliothèque saisir

OriginalL'auteur Nithin Baby | 2016-11-08

  1. 15

    Après quelques recherches, j'ai été capable de trouver la solution à ma propre question.
    J'ai trouvé une nouvelle bibliothèque nommée xlsx de style pour donner les styles. xlsx-style est de construire au-dessus de js-xlsx pour donner des styles aussi pour le fichier excel généré. Les styles peuvent être donnés pour les cellules à l'aide d'un nouvel attribut à l'intérieur de la cellule objet.

    L'explication est disponible sur le mécanisme national de prévention xlsx de style page.

    Style est donnée à l'aide d'un objet de style associée à chaque cellule. Police, Couleur, alignement, etc peut être donné à l'aide de ce style d'objet.

    J'ai ajouté un minimaliste de démonstration dans un page github.
    L'exemple de code est disponible à cette github.

    Vous pouvez trouver les capture d'écran de la excel généré de la page ci-dessous.
    Créer un fichier excel avec un peu de styles à l'aide de code JavaScript coté client (si possible en utilisant js-xlsx bibliothèque)

    je cherchais la même solution.pourriez vous s'il vous plaît mettre à jour avec l'exemple de code comment vous l'avez fait à l'aide de xlsx-style.Mon exigence est que l'écriture de données dans un .fichier xlsx avec un certain style de base. Reconnaissant de toute aide.
    pouvez-vous s'il vous plaît laissez-moi savoir comment le style de l'objet est défini dans la cellule de l'objet.J'ai essayé de cette façon, mais ne fonctionne pas.var cell = {v: data[R][C],s:{bgColor:"#E1697B"}};
    Je vais essayer de mettre à jour un code de travail bientôt.
    j'ai pu obtenir, il a travaillé.mais son meilleur si vous pouviez poster vos extraits de code ici car il y a manque d'exemples.Alors il va aider pour certains.merci.
    J'ai ajouté un exemple dans mon github respository. Tout le monde est bienvenue pour le rendre meilleur.

    OriginalL'auteur Nithin Baby

  2. 0

    À l'aide de xlsx de style, foreach yout collection "Feuille de calcul" et d'ajouter " le style avant de l'ajouter dans 'Classeur'. La propriété est responsable de ce processus est la " s " (de style).

    Exemple:

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

    OriginalL'auteur Darlan Dieterich