关于 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中存在的问题
存在的问题:
-
jsonData 的属性比我们要的数据多,如何剔除掉这部分我们不要的数据。
-
就是关于标题显示的问题,我们要显示对应的中文,而不是对应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');