使用纯前端JavaScript 实现Excel IO

bubugao 2021-11-21 原文

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

具体要求包含

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>