使用客户端JavaScript（如果可能，使用js xlsx库）创建一个带有几种样式的excel文件_Javascript_Excel_Cordova_Js Xlsx

使用客户端JavaScript（如果可能，使用js xlsx库）创建一个带有几种样式的excel文件

javascript excel cordova

使用客户端JavaScript（如果可能，使用js xlsx库）创建一个带有几种样式的excel文件,javascript,excel,cordova,js-xlsx,Javascript,Excel,Cordova,Js Xlsx,我想创建一个excel文件（采用.xlsx格式），并使用客户端JavaScript进行下载。我能够使用库创建一个示例文件。但我无法对其应用任何样式。至少需要一些基本样式，包括标题的背景色、标题的粗体字体和单元格的文本换行 js xlsx库文档说我们可以使用我尝试使用cell对象提供样式，但它没有反映在下载的.xlsx文件中。我甚至尝试读取一个.xlsx文件，然后使用xlsx.write（）函数将同一个文件写回去。但它会返回一个完全没有样式的excel文件。理想情况下，我希望下载的文件与上传的文

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

js xlsx库文档说我们可以使用

我尝试使用cell对象提供样式，但它没有反映在下载的.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>


功能s2ab（s）{
var buf=新阵列缓冲区（s.长度）；
var视图=新的UINT8阵列（buf）；
对于（var i=0；i！=s.length；++i）视图[i]=s.charCodeAt（i）&0xFF；
返回buf；
}   
/*设置XMLHttpRequest*/
var url=“template sample.xlsx”；
var oReq=新的XMLHttpRequest（）；
open（“GET”，url，true）；
oReq.responseType=“arraybuffer”；
oReq.onload=函数（e）{
var arraybuffer=oReq.响应；
/*将数据转换为二进制字符串*/
var数据=新的Uint8Array（arraybuffer）；
var arr=新数组（）；
对于（var i=0；i！=data.length；++i）arr[i]=String.fromCharCode（data[i]）；
var bstr=arr.join（“”）；
/*调用XLSX*/
var workbook=XLSX.read（bstr，{type:“binary”，cellStyles:true}）；
console.log（“阅读工作簿”）；
控制台日志（工作簿）；
/*在这里用工作簿做些什么*/
write（工作簿，{bookType:'XLSX'，bookst:true，type:'binary'，cellStyles:true}）；
saveAs（新Blob（[s2ab（wbout）]，{type:“application/octetstream”}），“template download.xlsx”）；
}
函数read（）{
oReq.send（）；
}
保存xlsx

示例代码取自

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

经过一些研究，我找到了自己问题的解决方案。我发现了一个新的库，名为giving stylesxlsx样式构建在js xlsx之上，用于为生成的excel文件提供样式。可以使用单元对象内的新属性将样式指定给单元

解释可在npm页面上找到

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

我已经添加了一个极简主义的演示在一个网站上。示例代码在此处提供

您可以在下面找到生成的excel页面的屏幕截图。

使用foreach yout collection'sheet'并在外接程序'WorkBook'之前添加样式。负责此过程的属性是“s”（样式）

样本：

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

只有几个例子可以使用，但我并没有发现它们对快速获得我所需要的东西有什么帮助

下面是我的解决方案，它使用xlsx样式和创建工作簿、设置单元格值和为该单元格着色所需的基本结构

我在获取正确的xlsx.core.min.js文件方面有点困难，因为某些原因，并非所有版本都包含此文件。我最终直接从Nithin Baby（anwsers演示版）上复制

下面是代码的简单版本

/* Object for the excel workbook data */
class Workbook {
    constructor() {
        this.SheetNames = [];
        this.Sheets = {};
    }
}

/* function for downloading the excel file */
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;
}

// create the worksheet data
var ws_data = {}
var range = { s: { c: 0, r: 0 }, e: { c: 10, r: 10 } }; // worksheet cell range 
ws_data['!ref'] = XLSX.utils.encode_range(range); // set cell the range

var cell = { // create cell
    v: 'test', // value
    s: { // style
        fill: {
            fgColor: { rgb: "FF6666" } // red
        }
    }
}
ws_data[XLSX.utils.encode_cell({ c: 1, r: 1 })] = cell; // add the cell to the sheet data

// create workbook and download
var wb = new Workbook();
wb.SheetNames.push('test'); // create new worksheet
wb.Sheets['test'] = ws_data; // set workseet data to the cell data
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' }); //workbook output
saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "Test Color.xlsx") // save workbook

有几件事需要注意

XLSX.utils.encode_cell（{c:1，r:1}）

是他们将excel数据线分配给数字的方式。例如：

{c:1，r:1}=='B2'

如果可以下载excel文件，但单元格数据未显示，则很可能与“工作表范围”值有关。确保它匹配或大于数据量。

range={s:{c:0，r:0}，e:{c:10，r:10}其中's'=当前值和'e'=我收集到的总数
在创建单元格时，可以设置更多属性。快速浏览一下，可以了解其中的内容。现在由您决定如何创建输出所需的单元格/设置单元格样式，并将其设置为适当的范围值。
我正在寻找相同的解决方案。请您使用示例代码更新您使用xlsx样式的操作方式。
。我的要求是使用一些基本样式将数据写入.xlsx文件。感谢您的帮助。您能告诉我如何在单元格对象中定义style对象吗？我尝试了这种方法，但没有成功。var cell={v:data[R][C]，s:{bgColor:#E1697B“}我可以让它工作。但是如果你能在这里发布你的工作代码片段会更好，因为这里没有示例。这样对某些人会有帮助。谢谢。@gihan我在我的github回复中添加了一个示例。欢迎任何人来做得更好。@Nitin Baby我必须用ionic创建类似的excel表格。你知道它对爱奥尼亚的作用吗。我试过了，但没有成功。对于下载excel文件而不使用任何库，默认的xlsx.core.min.js文件也是我无法正确应用样式的原因。我最终复制了尼钦的副本，效果也很好。