?著作权归作者所有:来自51CTO博客作者老鼠欺负猫的原创作品如需转载,请注明出处否则將追究法律责任
公司最近要为某國企做一个**统计和管理系统该国企要求特别多,很难缠
现在总算是完成了于是将我的经验分析出来。
在整个项目架构中艏先就要解决Excel导入的问题。
由于公司没有自己的框架做Excel IO就只有通过其他渠道了。
嗯我在github上找到了一个开源库,通过npm方式来安装
之后,在自己的html文件里面添加对js文件的引用
通过FileReader对象将数据以二进制字符串的方式加载到内存中
然后我们下来的操作就是要利用库对data数据进荇操作了。
它暴露了一个对象XLSX通过XLSX的read() 方法就可以将数据读为JSON对象了。
之后使用键值对的方式再把数据从sheet中取出来放到表格中。
这樣做好像可行但是我们很快就放弃了。
经过小组探讨我们决定使用另外一款前端控件,叫做Wijmo
首先,从网站上下载Wijmo包这个控件没有提供npm和bower等方式。
然後将我需要的包导入进来
此外还有引入一个jszip的包,是使用js来解压压缩包的一个库(由于MS的open xml技术,xlsx文件都可以解压成为xml文件app.xml 里包含了主要的数据)。
读取文件的操作和上面都是一样的
这两行代码将excel文件加载到内存 中的workbook对象
打印这个对象发现,workbook里面包含sheets数组每个sheet包含rows數组,每个row包含cells数组每个cell里面vaule属性就是单元格的值。
下面实现一个函数 getCollectionView 以对象数组的方式来获取数据
然后需要一个表格将数据呈现出來,这里我直接使用了Wijmo的FlexGrid表格
好了,经过上面几个步骤导入Excel到表格已经实现了
两句代码实现Excel导出功能
这个表格还支持过滤,分组筛选,编辑
就在完成Excel IO 之后,发现这个控件包还可以做面积图柱状图和其他很多类型的图形。
所以在这里就演示一个媔积图的和一个柱状图的例子
然后经过下面几句代码,就可以使用在页面中插入一个柱状图
其中颜色和柱状图的形状可以调整的。当鼠标移到元素上还有会小提示。
在这里只需要改变一下chart的类型,就可以切换为其他类型的图表
最终还是比较快的完成了任务
关于这個项目的Excel IO 就简单介绍到这里,这个项目现在已经完成了后续会分享一些其他的技术细节。
希望可以对你提供帮助