[点晴永久免费OA]使用纯前端JavaScript 实现Excel IO

当前位置：点晴OA办公管理信息系统 →『经验分享&问题答疑』

admin

2020年5月1日 2:55 本文热度 4078

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

具体要求包含

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

要求真多！

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

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

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

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

<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对象，

打印这个对象发现，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);

下面是效果

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'' },
    ]
});

下面看效果

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

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

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

关于本篇的代码已经上传 http://files.cnblogs.com/files/likeFlyingFish/xlsWijmo.rar;
后续会托管到github.

最终还是比较快的完成了任务。

关于这个项目的Excel IO 就简单介绍到这里，这个项目现在已经完成了，后续会分享一些其他的技术细节。

希望可以对你提供帮助。

本文转自：http://www.cnblogs.com/likeFlyingFish/p/5794467.html

该文章在 2020/5/1 2:55:26 编辑过


全部评论1
	admin 2020年5月1日 2:59 关于本篇的代码：附件：xlsWijmo.rar 该评论在 2020/5/1 2:59:37 编辑过

关键字查询

Excel

实现

正在查询...