Create an excel file with a few styles using client side JavaScript (if possible using js-xlsx library)
<p>I want to create an excel file(in <strong><em>.xlsx</em></strong> format) and make it available for download using <strong>Client Side JavaScript</strong>. I was able to create a sample file using <strong><a href="https://github.com/SheetJS/js-xlsx" rel="noreferrer">js-xlsx</a></strong> library. But I am not able to apply any styles to it. At least some basic styles including <strong><em>background color</em></strong> to header, <strong><em>bold font</em></strong> for header and <strong><em>text wrapping</em></strong> for the cells are required.</p>

<p><strong>js-xlsx</strong> library documentation says that we can give styles using <a href="https://www.npmjs.com/package/xlsx-style#cell-object" rel="noreferrer">Cell Object</a>.</p>

<p>I tried giving styles using the cell object but it is not reflecting in the downloaded .xlsx file. I even tried reading a .xlsx file and writing the same file back using <strong>XLSX.write()</strong> function. But it gives back an excel file with no styles at all. <em>Ideally I expect the downloaded file to have the same styles of uploaded file.</em> No font color or background colors were applied in the recreated file. I use <strong><em>Excel 2013</em></strong> for testing the downloaded files.</p>

<p>Please find below the excel screenshots before and after uploading.</p>

<p><strong>Original File</strong></p>

<p><a href="https://i.stack.imgur.com/GwK2s.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/GwK2s.jpg" alt="enter image description here"></a></p>

<p><strong>Downloaded File</strong></p>

<p><a href="https://i.stack.imgur.com/tBAuM.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/tBAuM.jpg" alt="enter image description here"></a></p>

<p>The code is given below.</p>

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

&lt;script&gt;

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) &amp; 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();    
}


&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;
    &lt;button onclick="read()"&gt;save xlsx&lt;/button&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>Sample code was taken from <a href="https://github.com/SheetJS/js-xlsx#parsing-workbooks" rel="noreferrer">here</a>.</p>

<p>What I look forward is either an option to give styles to cells using <strong>js-xlsx</strong> library or another library which provides this functionality. I found a library named <a href="https://www.npmjs.com/package/exceljs" rel="noreferrer">exceljs</a> , but it requires <strong><em>node js</em></strong> to support it. I am looking for a purely client side based solution. This is to be used for a <strong><em>Cordova</em></strong> based tablet and desktop application.</p>