关于 SheetJS 导出Excel 数据和标题显示问题解决

关于 SheetJS 导出Excel 数据和标题显示问题解决

GitHub 英文文档：https://github.com/SheetJS/sheetjs

GitHub 中文文档：https://github.com/rockboom/SheetJS-docs-zh-CN/blob/master/README.md

1.在浏览器里使用，增加一个script标签：

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

2.这里显示的数据我们以json格式为例如下：

var jsonData = [{
    "strCreateTime": "2020-07-14 10:38:39",
    "strUpdateTime": "2020-07-14 10:38:39",
    "num": 1,
    "title": "标题",
    "titleType": "0",
    "answerType": "0",
    "isRequired": "0",
    "selecta": "A",
    "selectb": "B",
    "selectc": "C",
    "selectd": "D",
    "selecte": "E",
    "selectf": "F",
    "correctAnswer": "A",
    "score": 1,
    "exp1": null,
    "exp2": null,
    "exp3": null
}];

3.导出Excel中存在的问题

存在的问题：

1. jsonData 的属性比我们要的数据多，如何剔除掉这部分我们不要的数据。

2. 就是关于标题显示的问题，我们要显示对应的中文，而不是对应jsonData中的属性名称。

例如：

我们最终要显示的格式：

4.解决问题

1.关于数据显示多的问题解决。

a. 可以修改相关的代码解决
源码地址：https://github.com/SheetJS/sheetjs/blob/master/dist/xlsx.js#L21324

我们分析21320~21324这几行的代码：

function sheet_add_json(_ws, js, opts) {
    // hdr为我们设置的header，关于headers是要导出Excel中sheet中设置的标题，可参考文档
	var hdr = o.header || [], C = 0;
	// 这里的JS对应到jsonData
	js.forEach(function (JS, R) {
		keys(JS).forEach(function(k) {//keys(JS)：返回jsonData的所有的属性对应的数组，k为属性的名称
			//if((C=hdr.indexOf(k)) == -1) hdr[C=hdr.length] = k;//如果属性不在，就会追加到hdr后面，这里我们把这行代码注销掉,换成下面的代码，不存在忽略掉
            if((C=hdr.indexOf(k)) == -1) return true;

通过修改代码返回的数据就不多了

b. 通过指定定数据的范围来显示数据

上面修改源码，感觉方式不好，通过了解文档发现有个属性可以指定数据的范围：ws[’!ref’]。

关于ws[’!ref’]相关介绍可参考文档，这里通过给ws[’!ref’]赋值来指定数据范围，举个例子：

// 个人理解为代表区域为从A1到L4范围的数据
ws['!ref']="A1:L4";

2.关于标题显示中文的问题

这里就是把返回的工作表中的对应的单元格对象进行原始值的覆盖，关于单元格对象的相关属性可参考文档：

https://github.com/SheetJS/sheetjs#cell-object. 这样就解决了中文显示的问题了。

ws.A1.v="题目编号";
ws.B1.v="题目";
ws.C1.v="题目类型";
ws.D1.v="答案类型";
ws.E1.v="选择设置A";
ws.F1.v="选择设置B";
ws.G1.v="选择设置C";
ws.H1.v="选择设置D";
ws.I1.v="选择设置E";
ws.J1.v="选择设置F";
ws.K1.v="正确答案";
ws.L1.v="题目分值";

5.相关Excel导出的代码

// 工作表(sheet)名称
var ws_name = "SheetJS";
// 工作表显示的数据
var ws_data = jsonData;
// 设置工作表的数据的标题
var header=['num','title','titleType','answerType','selecta','selectb','selectc','selectd','selecte','selectf','correctAnswer','score'];
// 创建一个新的工作簿对象
var wb = XLSX.utils.book_new();
// 把json对象数据转换为工作表
var ws = XLSX.utils.json_to_sheet(ws_data,{header:header});
// 设置工作表中要获取的范围
ws['!ref']="A1:L"+(ws_data.length+1);
// 设置中文的title
ws.A1.v="题目编号";
ws.B1.v="题目";
ws.C1.v="题目类型";
ws.D1.v="答案类型";
ws.E1.v="选择设置A";
ws.F1.v="选择设置B";
ws.G1.v="选择设置C";
ws.H1.v="选择设置D";
ws.I1.v="选择设置E";
ws.J1.v="选择设置F";
ws.K1.v="正确答案";
ws.L1.v="题目分值";
// 在工作簿中增加工作表
XLSX.utils.book_append_sheet(wb, ws, ws_name);
// 导出excel数据名称为：test.xlsx
XLSX.writeFile(wb, 'test.xlsx');