Javascript实现Excel导入和生成图表功能

前段时间用JS做了一个图表显示功能，还有这个Excel导入功能，最终效果如下：

最近怎么样？如果你看着你的心，那就往下看。这个设计需要用到几个插件：jquery.js、xlsx.js、echarts.js你需要提前下载，然后新建一个demo.html、demo.js、style.css文件，然后创建一个你想要操作的EXCEL文件。我这里的例子是这样的：

好了，先看HTML代码，介绍js，然后用div布局。代码如下：

head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title Excel图表生成工具/title link rel='样式表' href=' CSS/style . CSS ' Script src=' http : js/jquery . min . js '/Script Script src=' http 3360 js/xlsx . full . min . js选择文件/a/div/div class=' content ' div id=' table '/div div id=' chart ' style=' width : 700 px；高度： 400 px；/div /div/body这里需要强调。选择文件的“输入”标签的美化效果。这个标签将以css样式隐藏。我用另一个“a”链接标签来实现点击按钮的功能，后续的效果会用js代码来实现。

然后看看js代码。js中的“A”选项卡点击事件触发“input”选项卡点击事件，然后给文本赋值，显示文件路径，然后调用导入Excel方法：

$(文档)。ready(function(){ $(' # select _ BTN '))。单击(function () { $('#select_file '))。触发器(' click ')；}) $('#select_file ')。change(function(){ $(' # select _ text '))。val($('#select_file ')。val())；importf(this)；})})接下来实现导入Excel的方法，定义一个wb变量接收读取的EXCEL文档数据。读取过程是通过调用xlsx.js插件实现的。官方演示里有一个标准的写法，不用担心为什么写在这里，只要知道怎么用就可以了。最后，json数据可以通过XLSX.utils.sheet_to_json()获得。

获取json数据后，就是本机js语法操作。我们可以得到一个形状像EXCEL电子表格的数据数组，代码如下：

var wb//读取完成的数据var rABS=false//是否将文件读取为二进制字符串函数importf(obj) {//导入if(！物体。文件){ return} var f=obj。文件[0]；var reader=new FileReader()；读者。on load=function(e){ var data=e . target。结果；if(RabS){ WB=XLSX。read(btoa(修复数据(数据))，{//手动转化类型： ' base64 ' })；} else { wb=XLSX.read(数据，{ type : ' binary ' })；} //获取EXCEL json数据var JSON数据=XLSX。utils。工作表到JSON(WB .工作表[wb .工作表名称[0]])；定义变量列=[];定义变量数据=[列];for(JSON数据[0]中的定义变量键){数据[0].推（键);} for(var I=0；I JSON data . lengthi){ var row=[]；data.push(行);for(JSON数据[I]中的定义变量键){数据[i 1].推送(JSON数据[I][key])；} } //显示超过表格可创建（数据);//显示数据表getMultiBarChart(数据);};if(RabS){ reader。readasarayBuffer(f)；} else { reader。readasbinarystring(f)；} }函数fixdata(数据){ //文件流转BinaryString var o=' '，l=0，w=10240 for(；l数据字节长度/w；l)o=字符串。FromCharCode。应用(空，新的Uint8Array(data.slice(l * w，l * w(w)))；o=字符串。FromCharCode。应用(空，新的Uint 8数组(数据。切片(l * w)))；返回o；}关于超过表格的实现，我是通过"桌子"标签实现的，在代码中，通过循环操作数据数组数据，形成一个超文本标记语言代码，最后添加到对应的差异块中。同时为了显示不同的表头样式，需要添加编号属性，在钢性铸铁样式中实现样式的操作，代码如下：

函数创建表(数据){ var _ html=' tablefor(var I=0；一。数据。长度；I){ _ html=' tr '；_html='th '数据[I][0]'/th '；for(var j=1；j数据[i].长度；j){ if(I==0){ _ html=' TD id='列' '数据[I][j]'/TD '；} else { _ html=' TD ' data[I][j]'/TD '；} } _ html='/tr '；} _ html="/table "；$('#table ').追加(_ html)；}关于图表功能的实现，是调用echart.js插件实现的，在统计图官网，有非常详尽的设计文档和大量的演示可以参考，我们需要做的只是学会各个属性是如何配置的，然后调用统计图的方法即可，具体实现看代码吧：

getMultiBarChart=function(datatable){ var colors=[' # 0099 cc '，' #FF9933 '，' #99CC33 '，' #393939 '，' #f50001 '，' #fad797 '，' #59ccf7 '，' # c3b4df ']；var myChart=echart。init(文档。getelementbyid(' chart ')；var选项={ legend : { bottom : ' bottom }，text style : { color : ' # fff ' }，dataset : { source : datatable }，xaxis 3360[{ type : ' category '，gridindex : 0 0 0 0 0，axis lene 3: { linestyle : { color 333: ' # fff ' } } } }]，xaxis 3360I数据表。长度-1；I){ option。series[I]={ type : ' bar '，seriesLayoutBy: ' row '，标签: { normal : { show : true，position: 'top' }，items tyle : { normal : { color : colors[I]，}，}；} //使用刚指定的配置项和数据显示图表myChart.setOption(选项);}讲的这里，我设计的导入超过文件生成图表的功能的全部实现了，关于钢性铸铁的样式设计，可以参考下面的代码进行设计，不过每个人都有自己的想法，界面如何做的友好，也是前端工程师的一项技能。

正文{背景色： # 383838;font-family: Arial，无衬线；线高： 1.5;color: # 464646}。barner { margin:0 auto高度： 80px宽度： 70%;最大宽度宽度：1100px}。左{ float : left color : # 00a2d 4 }。右{ float : left margin : 30px 0 0 250 px } # select _ text { padd :3 px 6px填充-左侧：10 pxborder:1px实心# E7EAEC宽度宽度：230像素重量：25像素线高：25 px边框-左侧：3px实心# 3FB7EB背景# FAFAFB边框-半径：2 px} # select _ file { border :0 pxdisplay : none } # select _ BTN { color : # 00a2d 4；padd :4 px 6pxborder :1 px固体# 00A2D4边框-半径：2 px文本装饰：无；}.内容{ margin:50px auto高度： 80px宽度： 70%;最大宽度宽度：1100px}表格{边框-折叠：折叠；余量：0自动第{宽度：100像素重量：25像素边框：1px纯白色；font-size :12 px文本对齐：居中；颜色：白色；背景色-: # 00a2d 4；} td { width:200px边框：1px纯白色；颜色：白色；font-size :12 px文本对齐：left} #列{底色： # 00a2d 4；} #图表{边框-折叠：折叠；margin:0 auto}总结

以上所述是小编给大家介绍的爪哇岛描述语言实现超过导入生成图表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！