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

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

要求真多！

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

-

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

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

嗯，我在开源代码库上找到了一个开源库xlsx，通过国家预防机制方式来安装国家预防机制安装xlsx -保存之后，在自己的超文本标记语言文件里面添加对射流研究…文件的引用脚本src='http:/node _ modules/xlsx/dist/jszip。js '/script script src=' http :/node _ modules/xlsx/dist/xlsx。js /脚本通过文件阅读器对象将数据以二进制字符串的方式加载到内存中，

target.addEventListener('drop ')，函数(e){ e . prevent default()；handleDrop(即数据传输。文件[0])；});handleDrop=function(){ var reader=new file reader()；读者。on load=function(e){ var data=e . target。结果；};读者。readasbinarystring(f)；} 然后我们下来的操作就是要利用库对数据数据进行操作了。

它暴露了一个对象XLSX，通过XLSX的已读()方法就可以将数据读为JSON对象了。

var workbook=XLSX.read(数据，{ type : ' binary ' })；var sheetName=工作簿工作表名称[0]；var sheet=工作簿。工作表[工作表名称]；之后，使用键值对的方式再把数据从表中取出来放到表格中。

var表=文档。创建元素(“表”)；for(var row=1；行){ if(工作表['A '行]==null){ break；} var tr=文档。创建元素(' tr ')；for(var col=65；col=90col){ var c=String。FromCharCode(col)；//获取a '、' B '、' C '.定义变量键=' c '行；if(sheet[key]==null){ break；} var TD=文档。create element(' TD ')；道明。innerHTMl=sheet[key][' w ']；tr。appendchild}桌子。append child(tr)；}文档。queryselector(' # target ').appendChild(表格);下面是完整代码：index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style # target { height : 400 px；宽度： 700像素；背景-颜色： # f8f8余量： 200像素汽车；飞越：隐藏；边界半径：5像素；盒影：2 px 2px 5px # 888}。请将超过文件拖到这里；宽度： 100%;高度： 100%;显示器：块；文本对齐：中心；线高： 400像素；font-size : 24px字体系列： '微软雅黑；} #目标表{高度：250 px宽度宽度：400像素边界：1像素固体# ccc边界半径：3 pxmargin:75px汽车；} #目标表TD { text-align : center边框-top:1px实心# ccc边框-左侧：1px实心# ccc} #目标表tr :第一子TD {边框-顶部：0 px实心# CCC；} #目标表trtd :第一个孩子{边框-左侧：0 px实心# CCC}/style/head body div id=' target ' class=' hover '/div script src=' http :/node _ modules/xlsx/dist/jszip。js '/script script src=' http :/node _ modules/xlsx/dist/xlsx。js /脚本脚本src=' http :索引。js /脚本/正文/html下面是完整射流研究…代码index.js

window.addEventListener('load '，function(){ var target=document。query selector(' # target ')；目标。addeventlistener(' drag enter '，function(){ this。班级名单。移除('悬停')；});目标。addeventlistener(' drag leave '，function(){ this。班级名单。添加('悬停')；});目标。addeventlistener('拖动到，函数{这个。班级名单。移除('悬停')；e . PreventDefault()；});target.addEventListener('drop ')，函数(e){ e . prevent default()；handleDrop(即数据传输。文件[0])；});});var handleDrop=function(f){ var reader=new FileReader()，name=f.namereader。on load=function(e){ var data=e . target。结果，工作簿=XLSX.read(数据，{ type: 'binary' })，sheetName=工作簿.工作表名称[0]，工作表=工作簿工作表[工作表名称]，表格=文档。创建元素(“表”)；for(var row=1；行){ if(工作表['A '行]==null){ break；} var tr=文档。创建元素(' tr ')；for(var col=65；col=90col){ var c=String。FromCharCode(col)；//获取a '、' B '、' C '.定义变量键=' c '行；if(sheet[key]==null){ break；} var TD=文档。create element(' TD ')；道明。innerHTMl=sheet[key][' w ']；tr。appendchild}桌子。append child(tr)；}文档。queryselector(' # target ').appendChild(表格);};读者。readasbinarystring(f)；} 效果如下：

这样做好像可行，但是我们很快就放弃了。弊端太多了。•这个库现在目前还处于开发阶段，在问题里面还有很多的病菌被提出。这没有办法保证最终网站的稳定性。•这个库没有办法导入合并单元格的数据，只能是很死板的按照' a '，' B '，' C '.和1, 2, 3 坐标来查询数据，而且它要求内部单元格不能为空。•更比较不方便的就是，它没有行和列的计数的属性。•由于这是为国企做的，所以无法将关键功能依赖于这个星星量不是很多的库，降低风险，也是为了网站的安全性。•.-

经过小组探讨，我们决定使用另外一款前端控件，叫做威莫。首先，从网站上下载Wijmo包，这个控件没有提供国家预防机制和凉亭等方式。

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

脚本src='http:/wij mo/dist/controls/wij mo。量滴js '/script script src=' http :/wij mo/dist/controls/wij mo。网格。量滴js '/script script src=' http :/wij mo/dist/controls/wij mo。网格。细节。量滴js '/script script src=' http :/wij mo/dist/controls/wij mo。网格。xlsx。量滴js '/script script src=' http :/wijmo/dist/controls/wijmo。xlsx。量滴js /脚本此外，还有引入一个jszip的包，是使用射流研究…来解压压缩包的一个库。(由于女士的打开可扩展标记语言技术，xlsx文件都可以解压成为可扩展标记语言文件，app.xml里包含了主要的数据)。脚本src='http:/jszip。量滴js /脚本读取文件的操作和上面都是一样的

var handleDrop=函数（文件){ var reader，work bookif(file){ reader=new FileReader；读者。onload=function(e){ workbook=new wij mo。xlsx。工作簿()，工作簿。加载(阅读器。结果)；};reader.readAsDataURL(文件);}} 通过工作簿=新wijmo。xlsx。工作簿()；工作簿。加载(阅读器。结果)；这两行代码将超过文件加载到内存中的练习本对象。

打印练习本对象

打印这个对象发现，工作簿里面包含工作表数组，每个表包含行数组，每个排包含细胞数组，每个细胞里面沃勒属性就是单元格的值。这简直太又好了

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

var getCollectionView=函数（工作簿){ var collectionView=[]；if(工作簿){ var sheet=工作簿。工作表[0]，表头=[]；//列标题数组for (var i=0，长度=纸张。行。长度；一、长度；i ) { var row=sheet.rows[i]，行数组={ }；for (var j=0，jLength=row。细胞。长度；j jLengthj){ var cell=row。单元格[j]；//如果是第一行数据，那么是作为列标题出现的，就放进标题数组中if(I===0){ header。push(单元格。值)；} else { //后面的行数组，就作为rowArray对象的属性存储，属性名就是该列的标题行数组[header[j]]=单元格。价值；} } if (i！==0){ collectionview。push(行数组)；} } }返回collectionView}然后需要一个表格将数据呈现出来，这里我直接使用了Wijmo的弹性网格表格。

网格iv=文档。创建元素(' div ')；网格四。班级名单。添加('网格')；dataGrid=new wijmo。网格。柔性网格(GridV)；//通过传入容器构造一个弹性网格表单var collectionView=new wijmo。收藏品。collectionView(getCollectionView(工作簿));数据网格。items source=集合视图；好了，经过上面几个步骤，导入超过到表格已经实现了

这是完整的射流研究…代码：

index.js

(function () { var dataGrid=null，gridDiv=null，workbook=null window . addeventlistener(' load ')，function(){ gridiv=document。create element(' div ')；网格四。班级名单。添加('网格')；dataGrid=new wijmo。网格。柔性网格(GridV)；var target=文档。查询选择器(' # target ')；目标。addeventlistener('拖动回车'，函数(e){ e . prevent default()；this.classList.remove('悬停');});目标。addeventlistener('向左拖动'，函数(e){ e . prevent default()；this.classList.add('悬停');});目标。addeventlistener('拖动到，函数(e){ e . prevent default()；this.classList.remove('悬停');});target.addEventListener('drop ')，函数(e){ e . prevent default()；handleDrop(即数据传输。文件[0])；//将这个表单添加到页面上这个。append child(GridV)；});});var handleDrop=函数（文件){ var readervar工作簿；if(file){ reader=new FileReader；读者。onload=function(e){ workbook=new wij mo。xlsx。工作簿()；工作簿。加载(阅读器。结果)；var collectionView=new wijmo。收藏品。collectionView(getCollectionView(工作簿));数据网格。items source=集合视图；//控制台。日志(datagrid。collection view)；};reader.readAsDataURL(文件);} } var getCollectionView=function(工作簿){ var collectionView=[]；if(工作簿){ var sheet=工作簿。工作表[0]；var title=[]；for (var i=0，长度=纸张。行。长度；一、长度；I){ var row=sheet。行[I]；var行数组={ }；for (var j=0，jLength=row。细胞。长度；j jLengthj){ var cell=row。单元格[j]；if(I===0){ header。push(单元格。值)；} else { row array[header[j]]=cell。价值；} } if (i！==0){ collectionview。push(行数组)；} } }返回collectionView}})(窗口);下面是效果

超过导出

欧了

两句代码实现超过导出功能

威莫。网格。xlsx。flexgridxlxxconverter。保存(dataGrid，{ includeColumnHeaders : true }，FIlename)；这个表格还支持过滤，分组，筛选，编辑。

面积图和柱状图

就在完成Excel IO之后，发现这个控件包还可以做面积图，柱状图和其他很多类型的图形。所以在这里就演示一个面积图的和一个柱状图的例子。首先，要将包引进来脚本src='http:/wijmo/dist/controls/wijmo。图表。量滴js /脚本然后经过下面几句代码，就可以使用在页面中插入一个柱状图

图表=新wijmo。图表。弹性图表(' # chart ')；图表。initialize({ items source :集合视图，bindingX: 'name '，options : { group width : 15 }，series: [ { name: '年龄，binding: ' age ' }，]})；下面看效果

其中，直方图的颜色和形状可以调整。当鼠标在元素上移动时，会有一个小提示。

在这里，您只需要更改图表的类型就可以切换到其他类型的图表

chart . chart type=chart . chart type===wijmo . chart . chart type . column？wijmo . chart . chart type . area : wijmo . chart . chart type . column；关于这篇文章的代码已经上传到http://xiaozai.jb51.net/201608/yuanma/js-xlswijmo-io(jb51.net)。

后续活动将由github主办。

最后，我相对较快地完成了任务。

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

希望能帮到你。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。