使用纯前端JavaScript 实现Excel IO

532 查看

公司最近要为某国企做一个**统计和管理系统，

具体要求包含

Excel导入导出
根据导入的数据进行展示报表
图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格
Excel导出，并要提供客户端来管理Excel 文件
…

要求真多！

现在总算是完成了，于是将我的经验分析出来。

在整个项目架构中，首先就要解决Excel导入的问题。

由于公司没有自己的框架做Excel IO，就只有通过其他渠道了。

嗯，我在github上找到了一个开源库xlsx，通过npm方式来安装。

1	npm install xlsx --save

之后，在自己的html文件里面添加对js文件的引用

1 2	<script src="./node_modules/xlsx/dist/jszip.js"></script> <script src="./node_modules/xlsx/dist/xlsx.js"></script>

通过FileReader对象将数据以二进制字符串的方式加载到内存中，

target.addEventListener('drop', function (e) {

e.preventDefault();

handleDrop(e.dataTransfer.files[0]);

});

handleDrop = function(){

var reader = new FileReader();

reader.onload = function (e) {

var data = e.target.result;

...

};

reader.readAsBinaryString(f);

}

然后我们下来的操作就是要利用库对data数据进行操作了。

它暴露了一个对象XLSX，通过XLSX的read（）方法就可以将数据读为JSON对象了。

var workbook = XLSX.read(data, { type: 'binary' });

var sheetName = workbook.SheetNames[0];

var sheet = workbook.Sheets[sheetName];

之后，使用键值对的方式再把数据从sheet中取出来放到表格中。

var table = document.createElement('table');

for (var row = 1; ; row++) {

if (sheet['A' + row] == null) {

break;

}

var tr = document.createElement('tr');

for (var col = 65; col <= 90; col++) {

var c = String.fromCharCode(col);// get 'A', 'B', 'C' ...

var key = '' + c + row;

if (sheet[key] == null) {

break;

}

var td = document.createElement('td');

td.innerHTML = sheet[key]['w'];

tr.appendChild(td);

}

table.appendChild(tr);

}

document.querySelector('#target').appendChild(table);

下面是完整代码:

index.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#target {

height: 400px;

width: 700px;

background-color: #f8f8f8;

margin: 200px auto;

overflow:hidden;

border-radius:5px;

box-shadow:2px 2px 5px #888;

}

.hover::before {

content: '请将excel文件拖到这里';

width: 100%;

height: 100%;

display: block;

text-align: center;

line-height: 400px;

font-size: 24px;

font-family: '微软雅黑';

}

#target>table{

height:250px;

width:400px;

border:1px solid #ccc;

border-radius:3px;

margin:75px auto;

}

#target>table td{

text-align:center;

border-top:1px solid #ccc;

border-left:1px solid #ccc;

}

#target>table tr:first-child>td{

border-top:0px solid #ccc;

}

#target>table tr>td:first-child{

border-left:0px solid #ccc;

}

</style>

</head>

<body>

</div>

</body>

</html>

下面是完整js代码

index.js

window.addEventListener('load', function () {

var target = document.querySelector('#target');

target.addEventListener('dragenter', function () {

this.classList.remove('hover');

});

target.addEventListener