您现在的位置:圣剑网 >> 文章频道 >> 网站技术 >> 正文
使用纯前端JavaScript实现Excel的读写
新闻来源:文章频道发布时间:2016-08-23 12:27我有话说(0)

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

具体要求包含

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>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>

</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);}

效果如下:

图1.gif

这样做好像可行,但是我们很快就放弃了。

弊端太多了。

这个库现在目前还处于开发阶段,在issues里面还有很多的Bug被提出。这没有办法保证最终网站的稳定性。

这个库没有办法导入合并单元格的数据,只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐标来查询数据,而且它要求内部单元格不能为空。

更比较不方便的就是,它没有行和列的计数的属性。

由于这是为国企做的,所以无法将关键功能依赖于这个star量不是很多的库,降低风险,也是为了网站的安全性。

...

经过小组探讨,我们决定使用另外一款前端控件,叫做 Wijmo。

首先,从网站上下载Wijmo包,这个控件没有提供npm和bower等方式。

图2.png

然后将我需要的包导入进来

<script src="./wijmo/dist/controls/wijmo.min.js"></script>

<script src="./wijmo/dist/controls/wijmo.grid.min.js"></script>

<script src="./wijmo/dist/controls/wijmo.grid.detail.min.js"></script>

<script src="./wijmo/dist/controls/wijmo.grid.xlsx.min.js"></script>

<script src="./wijmo/dist/controls/wijmo.xlsx.min.js"></script>

此外,还有引入一个jszip的包,是使用js来解压压缩包的一个库。(由于MS的open xml技术,xlsx文件都可以解压成为xml文件,app.xml 里包含了主要的数据)。

<script src="./jszip.min.js"></script>

读取文件的操作和上面都是一样的

var handleDrop = function (file) {
   var reader,
       workbook;
 
   if (file) {
       reader = new FileReader;
       reader.onload = function (e) {
           workbook = new wijmo.xlsx.Workbook(),
               workbook.load(reader.result);
       };
       reader.readAsDataURL(file);
   }}

通过

workbook = new wijmo.xlsx.Workbook();
workbook.load(reader.result);

这两行代码将excel文件加载到内存 中的workbook对象。

打印workbook对象,

图3.png

打印这个对象发现,workbook里面包含sheets数组,每个sheet包含rows数组,每个row包含cells数组,每个cell里面vaule属性就是单元格的值。
这简直太又好了

下面实现一个函数 getCollectionView ,以对象数组的方式来获取数据

var getCollectionView = function (workbook) {

    var collectionView = [];

    if (workbook) {

        var sheet = workbook.sheets[0],

            header = []; // 列标题数组

      

        for (var i = 0, length = sheet.rows.length; i < length; i++) {

            var row = sheet.rows[i],

                rowArray = {};

            for (var j = 0, jLength = row.cells.length; j < jLength; j++) {

                var cell = row.cells[j];

                // 如果是第一行数据,那么是作为列标题出现的,就放进标题数组中

                if (i === 0) {

                    header.push(cell.value);

                }

                else {

                    // 后面的行数组,就作为rowArray对象的属性存储,属性名就是该列的标题。

                    rowArray[header[j]] = cell.value;

                }

            }

            if (i !== 0) {

                collectionView.push(rowArray);

            }

        }

    }

    return collectionView;

然后需要一个表格将数据呈现出来,这里我直接使用了Wijmo的FlexGrid表格。

gridDiv = document.createElement('div');gridDiv.classList.add('grid');

dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通过传入容器构造一个FlexGrid表单。

var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook));

dataGrid.itemsSource = collectionView;

好了,经过上面几个步骤,导入Excel到表格已经实现了

这是完整的js代码:

index.js

(function () {

    var dataGrid = null,

        gridDiv = null,

        workbook = null;

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

        gridDiv = document.createElement('div');

        gridDiv.classList.add('grid');

        dataGrid = new wijmo.grid.FlexGrid(gridDiv);

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


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

            e.preventDefault();

            this.classList.remove('hover');


        });

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

            e.preventDefault();

            this.classList.add('hover');

        });

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

            e.preventDefault();

            this.classList.remove('hover');

        });


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

            e.preventDefault();

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

            // 将这个表单添加到页面上

            this.appendChild(gridDiv);

        });

    });


    var handleDrop = function (file) {

        var reader;

        var workbook;

      

        if (file) {

            reader = new FileReader;

            reader.onload = function (e) {

                workbook = new wijmo.xlsx.Workbook();

                workbook.load(reader.result);

                var collectionView = new          wijmo.collections.CollectionView(getCollectionView(workbook));

                dataGrid.itemsSource = collectionView;

                // console.log(dataGrid.collectionView);

            };

            reader.readAsDataURL(file);

        }

    }


    var getCollectionView = function (workbook) {

        var collectionView = [];

      

        if (workbook) {

            var sheet = workbook.sheets[0];

            var title = [];

          

            for (var i = 0, length = sheet.rows.length; i < length; i++) {

                var row = sheet.rows[i];

                var rowArray = {};

              

                for (var j = 0, jLength = row.cells.length; j < jLength; j++) {

                    var cell = row.cells[j];

                    if (i === 0) {

                        header.push(cell.value);

                    }

                    else {

                        rowArray[header[j]] = cell.value;

                    }

                }

                if (i !== 0) {

                    collectionView.push(rowArray);

                }

            }

        }

        return collectionView;

    }

})(window);

下面是效果

图5.gif

Excel 导出

欧了

两句代码实现Excel导出功能

wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,

    { includeColumnHeaders: true }, fileName);

这个表格还支持过滤,分组,筛选,编辑。

面积图和柱状图

就在完成Excel IO 之后,发现这个控件包还可以做面积图,柱状图和其他很多类型的图形。

所以在这里就演示一个面积图的和一个柱状图的例子。

首先,要将包引进来。

<script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>

然后经过下面几句代码,就可以使用在页面中插入一个柱状图

chart = new wijmo.chart.FlexChart('#chart');chart.initialize({
   itemsSource: collectionView,
   bindingX: 'name',
   options: {
       groupWidth: 15
   },
   series: [        { name: '年龄', binding: 'age' },
   ]});

下面看效果

图6.png

其中,颜色和柱状图的形状可以调整的。当鼠标移到元素上,还有会小提示。

在这里,只需要改变一下chart的类型,就可以切换为其他类型的图表

chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ?
   wijmo.chart.ChartType.Area :    wijmo.chart.ChartType.Column;

图7.gif

源码地址:http://code.sjian.net/p/2940

网友评论

关于圣剑 - 广告服务 - 招聘信息 - 友情连接 - 保护隐私权 - 意见反馈 - 帮助中心 - 联系我们

Copyright © 2016 Sjian.Net Inc. All Rights Reserved.大千网络科技有限公司 版权所有

不良信息举报中心 陕ICP备10005927号 陕公网安备61010402000003号