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

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

我尝试使用单元格对象提供样式,但它未反射(reflect)在下载的.xlsx文件中。我什至尝试使用 XLSX.write()函数读取.xlsx文件并将其写回。但是它会返回一个完全没有样式的excel文件。理想情况下,我希望下载的文件具有与上传文件相同的样式。在重新创建的文件中未应用字体颜色或背景色。我使用 Excel 2013 来测试下载的文件。

上传前后请在下面的excel屏幕截图中找到。

原始文件

javascript - 使用客户端JavaScript创建具有几种样式的excel文件(如果可能,请使用js-xlsx库)-LMLPHP

下载文件

javascript - 使用客户端JavaScript创建具有几种样式的excel文件(如果可能,请使用js-xlsx库)-LMLPHP

代码如下。

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

示例代码来自here

我期待的是使用 js-xlsx 库为单元格提供样式的选项,或提供此功能的另一个库。我找到了一个名为exceljs的库,但是它需要节点js 来支持它。我正在寻找一个纯粹基于客户端的解决方案。这将用于基于 Cordova 的平板电脑和台式机应用程序。

最佳答案

经过一些研究,我能够找到自己的问题的解决方案。
我发现了一个名为xlsx-style的新库来提供样式。 xlsx样式是在 js-xlsx 的基础上构建的,还可以为生成的excel文件提供样式。可以使用单元格对象内的新属性将样式赋予单元格。

可以在npm xlsx-style页面上获得说明。

使用与每个单元格关联的样式对象来指定样式。字体,颜色,对齐方式等可以使用此样式对象指定。

我在github page中添加了一个极简演示。
可在github repository上获得示例代码。

您可以在下面找到生成的excel页面的屏幕截图。
javascript - 使用客户端JavaScript创建具有几种样式的excel文件(如果可能,请使用js-xlsx库)-LMLPHP

07-24 18:28
查看更多