公司最近要为某国企做一个**统计和管理系统，
具体要求包含
•Excel导入导出
•根据导入的数据进行展示报表
•图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格
•Excel导出，并要提供客户端来管理Excel 文件
•...
要求真多！
现在总算是完成了，于是将我的经验分析出来。
--------------------------------------------------------------------------------
在整个项目架构中，首先就要解决Excel导入的问题。
由于公司没有自己的框架做Excel IO，就只有通过其他渠道了。
嗯，我在github上找到了一个开源库xlsx，通过npm方式来安装。
npm install xlsx --save
之后，在自己的html文件里面添加对js文件的引用
<script src="https://www.jb51.net/article/node_modules/xlsx/dist/jszip.js"></script>
<script src="https://www.jb51.net/article/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> <html lang="en"> <head> <meta charset="UTF-8"> <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> </div> <script src="https://www.jb51.net/article/node_modules/xlsx/dist/jszip.js"></script> <script src="https://www.jb51.net/article/node_modules/xlsx/dist/xlsx.js"></script> <script src="https://www.jb51.net/index.js"></script> </body> </html>
下面是完整js代码
index.js
window.addEventListener('load', function () { var target = document.querySelector('#target'); target.addEventListener('dragenter', function () { this.classList.remove('hover'); }); target.addEventListener('dragleave', function () { this.classList.add('hover'); }); target.addEventListener('dragover', function (e) { this.classList.remove('hover'); e.preventDefault(); }); target.addEventListener('drop', function (e) { e.preventDefault(); handleDrop(e.dataTransfer.files[0]); }); }); var handleDrop = function (f) { var reader = new FileReader(), name = f.name; reader.onload = function (e) { var data = e.target.result, workbook = XLSX.read(data, { type: 'binary' }), sheetName = workbook.SheetNames[0], sheet = workbook.Sheets[sheetName], 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); }; reader.readAsBinaryString(f); }
效果如下：
