创build一个使用客户端JavaScript的几个样式的Excel文件(如果可能的话使用js-xlsx库)

我想创build一个excel文件(采用.xlsx格式),并使用客户端JavaScript进行下载。 我能够使用js-xlsx库创build一个示例文件。 但我无法应用任何风格。 至less需要一些基本样式,包括背景颜色到页眉, 粗体字体和单元格的文本包装

js-xlsx库文档说我们可以使用Cell Object给出样式。

我尝试使用单元格对象给出样式,但它不反映在下载的.xlsx文件中。 我甚至尝试读取.xlsx文件并使用XLSX.write()函数写回相同的文件。 但它会给出一个没有风格的excel文件。 理想情况下,我期望下载的文件具有相同样式的上传文件。 重新创build的文件中没有应用字体颜色或背景颜色。 我使用Excel 2013来testing下载的文件。

请在下载excel截图之前和之后上传。

原始文件

在这里输入图像说明

下载的文件

在这里输入图像说明

代码如下。

<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> 

示例代码是从这里获取的 。

我期待的是使用js-xlsx库或其他提供此function的库来为单元格提供样式的选项。 我find一个名为exceljs的库,但它需要节点js来支持它。 我正在寻找一个纯粹的基于客户端的解决scheme。 这将用于基于Cordova的平板电脑和桌面应用程序。

经过一番研究,我find了解决我自己的问题。 我发现了一个名为xlsx-style的新库,用于给出样式。 xlsx-style是在js-xlsx之上构build的,用于给所生成的excel文件提供样式。 可以使用单元格对象内的新属性将样式赋予单元格。

解释可以在npm xlsx-style页面中find。

样式是使用与每个单元格关联的样式对象给出的。 字体,颜色,alignment等可以使用这个样式对象给出。

我已经在github页面添加了一个简约的演示。 示例代码在这个github仓库中可用。

你可以在下面find生成的excel页面的截图。 在这里输入图像说明