22

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

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

我尝试使用单元格对象提供样式，但它没有反映在下载的 .xlsx 文件中。我什至尝试使用XLSX.write()函数读取 .xlsx 文件并写回相同的文件。但它会返回一个完全没有样式的 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的库，但它需要node js来支持它。我正在寻找一个纯粹的基于客户端的解决方案。这将用于基于Cordova的平板电脑和桌面应用程序。

4

4 回答 4

29

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

解释可在 npm xlsx 样式页面上找到。

样式是使用与每个单元格关联的样式对象给出的。可以使用此样式对象给出字体、颜色、对齐方式等。

我在github 页面中添加了一个极简演示。示例代码可在此github 存储库中获得。

您可以在下面找到生成的 excel 页面的屏幕截图。 在此处输入图像描述

于 2017-01-12T09:05:29.117 回答
1

作为编写简单*.xlsx 文件的另一种选择，我建议使用write-excel-filepackage。

https://npmjs.com/package/write-excel-file

它支持使用粗体字体、文本颜色、背景颜色、水平对齐、垂直对齐和溢出时文本换行的样式单元格。

import writeXlsxFile from 'write-excel-file'

const data = [
  [{
    value: 'Row 1, Col 1',
    fontWeight: 'bold'
  }, {
    value: 'Row 1, Col 2',
    color: '#ffffff',
    backgroundColor: '#cc0000'
  }],
  [{
    value: 'Row 2, Col 1',
    align: 'right',
    alignVertical: 'top'
  }, {
    value: 'Row 2, Col 2. Long Text \n Multi-line',
    wrap: true
  }]
]

await writeXlsxFile(data, {
  fileName: 'file.xlsx'
})
于 2021-06-22T15:39:41.270 回答
1

只有几个使用xlsx 样式的示例，我并没有真正找到清楚或所有有助于快速获得所需内容的示例。

这是我使用 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 样式有更多属性可以在创建单元格时设置，值得快速浏览一下以了解那里有什么。现在由您决定如何创建/设置输出所需的单元格并适当地设置为范围值。

于 2020-10-19T02:58:15.110 回答
0

使用xlsx-style， foreach yout collection 'WorkSheet' 并在添加 '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'}
                }
            }
        }
    }
})
于 2018-04-30T14:03:42.753 回答