利用JavaScript实现前端Excel的导入与导出--sheetjs

在项目开发过程中，偶尔会遇到Excel导入与导出的需求。在以前基本上由后台实现。无论是java还是.net都有相应的第三方组件供我们使用。最近在网上看到了可以利用js来实现。也不失为一种简单的方案。

---

SheetJS

今天的主角是sheetjs，官网地址：http://sheetjs.com。github地址：https://github.com/sheetjs/js-xlsx。

个人感觉功能比较强大，支持多sheet页，能在excel和html、json、text等好多种格式之间相互转换（如下图）。

另外兼容性也比较好，可以放心使用：

以前没接触的朋友，可以直接看官网的Demo，比较直观。比较着急使用的朋友，可以直接百度下，有现成的代码示例，比如：

https://blog.youkuaiyun.com/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读取写入，当作正常的表单数据处理即可。

但数据量不能太大。