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

本文系原创，转载请注明出处：

https://blog.csdn.net/chengbao315/article/details/83187961

有一段时间没有写web的文章了，不是不想写，是自己学的确实不咋地，没啥拿出手的东西跟大家分享。说来凑巧，刚想写点什么的时候，领导就给我分了一个web的小活，整理了一下跟大家分享。

前一段时间做了一个用 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="stylesheet" href="css/style.css"><script src="js/jquery.min.js"></script><script src="js/xlsx.full.min.js"></script><script src="js/echarts.min.js"></script><script src="js/demo.js"></script>
</head><body><div class="barner"><div class="left"><h1>Excel图表生成工具</h1></div><div class="right"><input id="select_text" type="text" placeholder="请选择文件···" readonly /><input id="select_file" type="file" /><a id="select_btn" href="javascript:void(0);">选择文件</a></div></div><div class="content"><div id="table"></div><div id="chart" style="width: 700px; height: 400px;"></div></div>
</body>

这里需要强调一下，选择文件的 “input” 标签的美化效果，这个标签在css 样式中会隐藏，我用另一个 “a” 链接标签实现点击按钮的作用，后续的效果在 js 代码中实现。

接着看 js 代码， js 中 “a” 标签点击事件中触发 “input” 标签点击事件，然后再给文本赋值，显示文件路径，之后调用导入Excel 方法：

$(document).ready(function () {$('#select_btn').click(function () {$('#select_file').trigger('click');})$('#select_file').change(function () {$('#select_text').val($('#select_file').val());importf(this);})})

接下来实现导入Excel 方法，定义一个wb变量用于接收读取的EXCEL文档数据，读取过程是调用 xlsx.js 插件实现的，官方demo中有标准的写法，这里不用纠结为什么这么写，知道这么用就可以，最后通过 XLSX.utils.sheet_to_json（）方法可以得到 json 数据。

得到 json 数据后就是原生的 js 语法操作了，我们可以得到一个形如EXCEL表格那样的data 数组，代码如下：

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串function importf(obj) {//导入if (!obj.files) {return;}var f = obj.files[0];var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;if (rABS) {wb = XLSX.read(btoa(fixdata(data)), {//手动转化type: 'base64'});} else {wb = XLSX.read(data, {type: 'binary'});}// 获取 EXCEL json数据var jsondata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);var column = [];var data = [column];for (var key in jsondata[0]) {data[0].push(key);}for (var i = 0; i < jsondata.length; i++) {var row = [];data.push(row);for (var key in jsondata[i]) {data[i + 1].push(jsondata[i][key]);}}// 显示EXCEL 表格creattable(data);// 显示数据表getMultiBarChart(data);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}
}function fixdata(data) { //文件流转BinaryStringvar o = "",l = 0,w = 10240;for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;
}

关于EXCEL表格的实现，我是通过 “table” 标签实现的，在代码中，通过循环操作data 数组数据，形成一个html 代码，最后添加到对应的 div 块中。同时为了显示不同的表头样式，需要添加 id 属性，在css样式中实现样式的操作，代码如下：

function creattable(data) {var _html = " <table>";for (var i = 0; i < data.length; i++) {_html += "<tr>";_html += "<th>" + data[i][0] + "</th>";for (var j = 1; j < data[i].length; j++) {if(i == 0){_html += "<td id='column'>" + data[i][j] + "</td>";}else{_html += "<td>" + data[i][j] + "</td>";}}_html += "</tr>";}_html += "</table>";$('#table').append(_html);
}

关于图表功能的实现，是调用 echart.js 插件实现的，在echart 官网，有非常详尽的设计文档和大量的demo可以参考，我们需要做的只是学会各个属性是如何配置的，然后调用 echart 的方法即可，具体实现看代码吧：

getMultiBarChart = function (datatable) {var colors = ['#0099CC', '#FF9933', '#99CC33', '#393939', '#f50001', '#fad797', '#59ccf7', '#c3b4df'];var myChart = echarts.init(document.getElementById('chart'));var option = {legend: { bottom: "bottom" ,textStyle:{color: '#fff'}},dataset: {source: datatable},xAxis: [{ type: 'category', gridIndex: 0, axisLine:{lineStyle:{color: '#fff'}}}],yAxis: [{ gridIndex: 0,axisLine:{lineStyle:{color: '#fff'}}}],series: []};for (var i = 0; i < datatable.length - 1; i++) {option.series[i] = {type: 'bar', seriesLayoutBy: 'row',label: {normal: {show: true,position: 'top'}},itemStyle: {normal: {color: colors[i],}},};}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
}

讲的这里，我设计的导入EXCEL文件生成图表的功能的全部实现了，关于css 的样式设计，可以参考下面的代码进行设计，不过每个人都有自己的想法，界面如何做的友好，也是前端工程师的一项技能。

body {background-color: #383838;font-family: Arial, sans-serif;line-height: 1.5;color: #464646;
}
.barner {margin:0 auto;height: 80px;width: 70%;max-width:1100px;
}
.left{float: left;color: #00A2D4;
}
.right{float: left;margin: 30px 0 0 250px;
}
#select_text {padding:3px 6px;padding-left:10px;border:1px solid #E7EAEC;width:230px;height:25px;line-height:25px;border-left:3px solid #3FB7EB;background:#FAFAFB;border-radius:2px;
}
#select_file{border:0px;display:none;
}
#select_btn{color:#00A2D4;padding:4px 6px;border:1px solid #00A2D4;border-radius:2px;text-decoration: none;
}
.content {margin:50px auto;height: 80px;width: 70%;max-width:1100px;
}
table
{border-collapse :collapse ;margin:0 auto;
}
th
{width:100px;height:25px;border :1px solid white;font-size:12px;text-align :center;color: white;background-color: #00A2D4;
}
td
{width:200px;border :1px solid white;color: white;font-size:12px;text-align :left;
}
#column
{background-color: #00A2D4;
}
#chart
{border-collapse :collapse ;margin:0 auto;
}

好了，今天的文章就到这里了，新人新手，欢迎大家多多指教！如有疑问，欢迎评论留言。

Javascript 实现 Excel 导入生成图表功能相关推荐

html如何自动导入excel,Javascript 实现 Excel 导入生成图表功能
前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的: 怎么样?如果看了心动的话,就接着往下看吧. 本次的这个设计需要用到几个插件:jquery.js.x ...
python读excel表格数据绘制图表_Python读取Excel数据生成图表 v2.0
原博文 2020-06-15 15:09 − ## Python读取Excel数据生成图表 v2.0 ## 一.需求背景自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用 ...
前端实现 Excel 导入和导出功能
注意:Excel的导入.导出功能一般情况下都是服务端完成,这里只是记录一下前端实现方法,供小众场景使用. 这里的实现要依赖第三方库:xlsx. 兼容性:IE9+ 安装 xlsx npm i -S ht ...
如何用C＃在Excel中生成图表？
如何用C#在Excel中生成图表? exc.Charts.Add(oMissing,oMissing,1,oMissing); exc.ActiveChart.ChartType=Excel ...
python提取excel前十行生成图_Python读取Excel数据生成图表 v2.0
Python读取Excel数据生成图表 v2.0 一.需求背景自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用Excel实现的.但数据行多后,图表大小调整总是不太方便, ...
你知道excel的动态图表功能吗
一家互联网公司想要分析其社交媒体平台上的用户互动情况,并通过可视化方式展示出来.他们希望能够看到用户在一天中不同时间段的活跃程度和用户互动类型的分布情况. 而Excel是一款好用的电子表格软件,除了基 ...
【实战】1467- 实现一个前端的 Excel 导入和导出功能
前言 [**负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!** [**切图仔 B**]:接口这边不能优化一下吗?比如 ...
可以实现一个前端的 Excel 导入和导出功能吗？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流前言 [**负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果 ...
给我实现一个前端的 Excel 导入和导出功能
前言 [负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果! [切图仔 B]: 接口这边不能优化一下吗?比如排查下慢的原因 ...

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

Javascript 实现 Excel 导入生成图表功能相关推荐

最新文章

热门文章