公司最近要为某国企做一个 ** 统计和管理系统,
具体要求包含
要求真多!
现在总算是完成了,于是将我的经验分析出来。
在整个项目架构中,首先就要解决 Excel 导入的问题。
由于公司没有自己的框架做 Excel IO,就只有通过其他渠道了。
嗯,我在 github 上找到了一个开源库,通过 npm 方式来安装。
- npm install xlsx--save
之后,在自己的 html 文件里面添加对 js 文件的引用
- <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>
- <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 id="target" class="hover">
- </div>
- <script src="./node_modules/xlsx/dist/jszip.js">
- </script>
- <script src="./node_modules/xlsx/dist/xlsx.js">
- </script>
- <script src="index.js">
- </script>
- </body>
来源: http://www.cnblogs.com/likeFlyingFish/p/5794467.html