在项目开发过程中,偶尔会遇到Excel导入与导出的需求。在以前基本上由后台实现。无论是java还是.net都有相应的第三方组件供我们使用。最近在网上看到了可以利用js来实现。也不失为一种简单的方案。
SheetJS
今天的主角是sheetjs,官网地址:http://sheetjs.com。github地址:https://github.com/sheetjs/js-xlsx。
个人感觉功能比较强大,支持多sheet页,能在excel和html、json、text等好多种格式之间相互转换(如下图)。
另外兼容性也比较好,可以放心使用:
以前没接触的朋友,可以直接看官网的Demo,比较直观。比较着急使用的朋友,可以直接百度下,有现成的代码示例,比如:
https://blog.csdn.net/marko_zheng/article/details/79454756
https://www.jianshu.com/p/74d405940305
在项目中的应用
导出功能
这次需求比较简单,仅仅是将网页上的一个表格导出到excel,代码也简单:
var elt = document.getElementById('tableContractsExcel');
var wb = XLSX.utils.table_to_book(elt, {sheet:"合同列表"});
return XLSX.writeFile(wb, '合同列表.xlsx');
tableContractsExcel为页面上<table>标签的id
导入功能
流程:
1、选择需要导入的excel
2、利用sheetjs读取excel转化为json,然后以表格的形式展示到页面上。
3、点击导入按钮,遍历json数据,以ajax形式逐条提交到后台(效率考虑的话,也可以批量,比如一个ajax请求提交10条数据),后台完成检验与保存。可以看出,这部分与日常开发类似,已经与sheetjs无关了。
为方便理解,截个图:
主要代码:
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<input type="file" onchange="readData(this)">
function readData(obj) {
if (!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
var questions = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//读取数据
$scope.convertQuestion(questions);//后续的数据格式处理,方便展示,与导入无关
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
总结
用这种方式做导入,可以实时将导入过程展现给用户,导入结果可以显示到最后一列(见上图)。
而且后台也不用关心excel读取写入,当作正常的表单数据处理即可。
但数据量不能太大。