2016-11-08 18 views
8

我想創建一個Excel文件(的.xlsx格式),並使用客戶端使其可用於下載Side JavaScript。我能夠使用js-xlsx庫創建示例文件。但我無法應用任何樣式。至少一些基本風格,包括背景顏色到標題,粗體的標頭和文字環繞的細胞是必需的。創建一個Excel使用客戶端的JavaScript幾個樣式文件(如果可能的話用JS-XLSX庫)

js-xlsx庫文檔說,我們可以使用Cell Object給樣式。

我嘗試使用單元格對象給出樣式,但它沒有反映在下載的.xlsx文件中。我甚至嘗試讀取.xlsx文件並使用XLSX.write()函數寫回相同的文件。但它會給出一個沒有樣式的excel文件。 理想情況下,我希望下載的文件具有相同樣式的上傳文件。未在重新創建的文件中應用字體顏色或背景顏色。我使用Excel 2013用於測試下載的文件。

請在下載excel截圖之前和之後上傳。

原始文件

enter image description here

下載的文件

enter image description here

的代碼如下所示。

<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才能支持它。我正在尋找一個純粹的基於客戶端的解決方案。這將用於基於平板電腦和桌面應用程序的科爾多瓦

回答

10

經過一番研究,我找到了解決我自己的問題。 我發現了一個名爲xlsx-style的新庫,用於給出樣式。 xlsx-style構建於js-xlsx之上,用於爲生成的excel文件提供樣式。可以使用單元格對象內的新屬性將樣式賦予單元格。

有關說明,請參見npm xlsx-style頁面。

使用與每個單元格關聯的樣式對象給出樣式。字體,顏色,對齊等可以使用這個樣式對象給出。

我在github page中添加了極簡主義演示。 示例代碼可在此github repository

您可以在下面找到生成的excel頁面的屏幕截圖。 enter image description here

+0

我正在尋找相同的解決方案。請用示例代碼更新如何使用'xlsx-style'完成它。我的要求是用一些基本樣式將數據寫入.xlsx文件。感謝任何幫助。 – gihan

+0

可以請你告訴我樣式對象是如何在單元格對象中定義的。我嘗試過這種方式,但沒有起作用.'var cell = {v:data [R] [C],s:{bgColor:「#E1697B」}} ;' – gihan

+0

我會盡快更新一個工作代碼。 –

相關問題