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="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) { //文件流转BinaryString
var 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 导入生成图表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
js导入导出excel(实例代码)
导入: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title></head><script language="javascript" type="text/javascript">function importXLS(fileName){
-
Python读取Json字典写入Excel表格的方法
需求: 因需要将一json文件中大量的信息填入一固定格式的Excel表格,单纯的复制粘贴肯定也能完成,但是想偷懒一下,于是借助Python解决问题. 环境: Windows7 +Python2.7 +Xlwt 具体分析: 原始文件为json列表,列表中有多个字典,生成Excel文件需要将列表中的字典的键值按键对应排列,也就是说,所有为"XX"的键对应的值写在一列,且每个字典中的不同键的键值保证在同一行. 解决思路是,读取json文件,然后遍历字典的键和值,读完第一个字典并写入Excel
-
JS实现导出Excel的五种方法详解【附源码下载】
本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc
-
用javascript将数据导入Excel示例代码
网上收集的代码 <input type="button" name="out_excel" onclick="AutomateExcel();" value="导出到excel" class="notPrint"> 导出到Excel代码 <SCRIPT LANGUAGE="javascript"> <!-- function AutomateExcel()
-
Vue导出json数据到Excel电子表格的示例
网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js
-
Javascript 实现 Excel 导入生成图表功能
前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的: 怎么样?如果看了心动的话,就接着往下看吧. 本次的这个设计需要用到几个插件:jquery.js.xlsx.js.echarts.js,大家需要提前进行下载,之后新建demo.html,demo.js,style.css文件,然后新建一个你想要操作的EXCEL文件,我这里的例子是这样的: 好了,先看HTML代码,引入js,然后使用div布局,代码如下: <head> <meta chars
-
使用纯前端JavaScript实现Excel导入导出方法过程详解
公司最近要为某国企做一个**统计和管理系统, 具体要求包含 Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格Excel导出,并要提供客户端来管理Excel 文件... 要求真多! 现在总算是完成了,于是将我的经验分析出来. 在整个项目架构中,首先就要解决Excel导入的问题. 由于公司没有自己的框架做Excel IO,就只有通过其他渠道了. 嗯,我在github上找到了一个开源库xlsx,通过npm方式来安装. npm inst
-
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
下载phpexcel文件,地址:phpexcel.codeplex.com/ 代码示例 require_once 'phpexcel/Classes/PHPExcel.php'; require_once 'phpexcel/Classes/PHPExcel/IOFactory.php'; require_once 'phpexcel/Classes/PHPExcel/Reader/Excel5.php'; $objReader = PHPExcel_IOFactory::createReade
-
C# 文件上传下载(Excel导入,多线程下载)功能的实现代码
废话不多说了,直接给大家贴代码,具体代码如下所示: //打开Excel文件,转换为DataTable DataTable dtExcel; private void OpenFile() { OpenFileDialog dialog = new OpenFileDialog(); dialog.Filter = "Microsoft Excel files(*.xls)|*.xls;*.xlsx"; //筛选打开文件类型 :图片 *.jpg|*.jpg|*.bmp|*.bmp ;&q
-
Spring Boot项目如何优雅实现Excel导入与导出功能
目录 背景 EasyExcel 问题 分析与解决 Spring Boot Excel 导入与导出 依赖引入 Excel 导入 基本导入功能 进阶导入功能 Excel 导出 Excel 导入参数校验 开启校验 校验规则定义 Bean Validation 定义校验规则 ExcelValidator 接口定义校验规则 校验结果接收 异常捕获接收校验结果 controller 方法参数接收校验结果 总结 背景 Excel 导入与导出是项目中经常用到的功能,在 Java 中常用 poi 实现 Excel
-
利用Python生成Excel炫酷图表
目录 前言 1.xlswriter库 2.生成折线图 3.生成柱状图 4.生成饼图 5.实战拓展 前言 本文对Python 自动化操作Excel并生成图表,做了详细的分析和说明 我们先来看一下python中能操作Excel的常用库对比 1.xlswriter库 XlsxWriter是一个用来写Excel2007和xlsx文件格式的python模块.它可以用来写文本.数字.公式并支持单元格格式化.图片.图表.文档配置.自动过滤等特性 优点:功能更多.文档高保真.扩展格式类型.更快并可配置 缺点:不
-
javascript操作excel生成报表全攻略
最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例 复制代码 代码如下: <html> <head> <script language="javascript" type="text/javascript"> </script><script language="javascript" type="text/javascript"&
-
Java实现Excel导入导出数据库的方法示例
本文实例讲述了Java实现Excel导入导出数据库的方法.分享给大家供大家参考,具体如下: 由于公司需求,想通过Excel导入数据添加到数据库中,而导入的Excel的字段是不固定的,使用得通过动态创建数据表,每个Excel对应一张数据表,怎么动态创建数据表,可以参考前面一篇<java使用JDBC动态创建数据表及SQL预处理的方法>. 下面主要讲讲怎么将Excel导入到数据库中,直接上代码:干货走起~~ ExcellToObjectUtil 类 主要功能是讲Excel中的数据导入到数据库中,有几
-
JavaScript实现excel文件导入导出
目录 一.需求场景描述 1.此时前端上传解析excel文件可能更合适 2.此时前端下载excel文件可能优雅一些 二.实现思路分析 1.导入excel文件实现思路分析 2.导出excel文件实现思路分析 三.关键代码 1. exportExcel.js 导出excel文件 2. importExcel.js 导入excel文件 四.使用示例 1.使用示例一:上传解析excel 2.使用示例二:下载excel文件 一.需求场景描述 文件的导入导出是非常常见的需求功能,excel文件的导入导出更为常
-
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
1.简介 本文主要给大家介绍了关于Laravel 5用Laravel Excel实现Excel/CSV文件导入导出的相关内容,下面话不多说了,来一起看看详细的介绍吧. Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和 导出 . 该项目的GitHub地址是: https://github.com/Maatwebsite/Laravel-Excel. 本地下载地址:h