使用客户端JavaScript创建具有几种样式的excel文件(如果可能,使用js-xlsx库)
Nit*_*aby 13 javascript excel cordova js-xlsx
我想创建一个excel文件(.xlsx格式)并使用Client Side JavaScript使其可供下载.我能够使用js-xlsx库创建一个示例文件.但我无法应用任何样式.至少需要一些基本样式,包括标题的背景颜色,标题的粗体字和单元格的文本换行.
js-xlsx库文档说我们可以使用Cell Object提供样式.
我尝试使用单元格对象给出样式,但它没有反映在下载的.xlsx文件中.我甚至尝试读取.xlsx文件并使用XLSX.write()函数写回相同的文件.但它会返回一个没有样式的excel文件.理想情况下,我希望下载的文件具有相同的上传文件样式.在重新创建的文件中未应用任何字体颜色或背景颜色.我使用Excel 2013测试下载的文件.
请在下面找到上传前后的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库或另一个提供此功能的库为单元格提供样式的选项.我找到了一个名为exceljs的库,但它需要节点js来支持它.我正在寻找一个纯粹基于客户端的解决方案.这将用于基于Cordova的平板电脑和桌面应用程序.
Nit*_*aby 16
经过一些研究,我能够找到自己问题的解决方案.我发现了一个名为xlsx-style的新库,用于给出样式.xlsx-style构建在js-xlsx之上,用于为生成的excel文件提供样式.可以使用单元格对象内的新属性将样式赋予单元格.
可以在npm xlsx样式页面上找到解释.
使用与每个单元格关联的样式对象给出样式.可以使用此样式对象给出字体,颜色,对齐等.
我在github页面中添加了一个极简主义演示.此github存储库中提供了示例代码.
您可以在下面找到生成的Excel页面的屏幕截图.
| 归档时间： |
|
| 查看次数： |
17293 次 |
| 最近记录： |