LOADING STUFF...

使用纯前端JavaScript 实现Excel IO

–>

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

具体要求包含

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

要求真多!

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


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

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

嗯,我在github上找到了一个开源库xlsx,通过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>

原文链接:https://www.cnblogs.com/bubugao/p/js4.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章