Javascript 實(shí)現(xiàn) Excel 導(dǎo)入生成圖表功能
前一段時間做了一個用 JS 實(shí)現(xiàn)圖表顯示的功能，加上這次的Excel 導(dǎo)入功能，最終的效果是這樣的：
怎么樣？如果看了心動的話，就接著往下看吧。 本次的這個設(shè)計需要用到幾個插件：jquery.js、xlsx.js、echarts.js，大家需要提前進(jìn)行下載，之后新建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>
這里需要強(qiáng)調(diào)一下，選擇文件的 “input” 標(biāo)簽的美化效果，這個標(biāo)簽在css 樣式中會隱藏，我用另一個 “a” 鏈接標(biāo)簽實(shí)現(xiàn)點(diǎn)擊按鈕的作用，后續(xù)的效果在 js 代碼中實(shí)現(xiàn)。
接著看 js 代碼， js 中 “a” 標(biāo)簽點(diǎn)擊事件中觸發(fā) “input” 標(biāo)簽點(diǎn)擊事件，然后再給文本賦值，顯示文件路徑，之后調(diào)用導(dǎo)入Excel 方法：
$(document).ready(function () {
$('#select_btn').click(function () {
$('#select_file').trigger('click');
})
$('#select_file').change(function () {
$('#select_text').val($('#select_file').val());
importf(this);
})
})
接下來實(shí)現(xiàn)導(dǎo)入Excel 方法，定義一個wb變量用于接收讀取的EXCEL文檔數(shù)據(jù)，讀取過程是調(diào)用 xlsx.js 插件 實(shí)現(xiàn)的，官方demo中有標(biāo)準(zhǔn)的寫法，這里不用糾結(jié)為什么這么寫，知道這么用就可以，最后通過 XLSX.utils.sheet_to_json（）方法可以得到 json 數(shù)據(jù)。
得到 json 數(shù)據(jù)后就是原生的 js 語法操作了，我們可以得到一個形如EXCEL表格那樣的data 數(shù)組，代碼如下：
var wb;//讀取完成的數(shù)據(jù)
var rABS = false; //是否將文件讀取為二進(jìn)制字符串
function importf(obj) {//導(dǎo)入
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)), {//手動轉(zhuǎn)化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
// 獲取 EXCEL json數(shù)據(jù)
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);
// 顯示數(shù)據(jù)表
getMultiBarChart(data);
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
function fixdata(data) { //文件流轉(zhuǎn)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;
}
關(guān)于EXCEL表格的實(shí)現(xiàn)，我是通過 “table” 標(biāo)簽實(shí)現(xiàn)的，在代碼中，通過循環(huán)操作data 數(shù)組數(shù)據(jù)，形成一個html 代碼，最后添加到對應(yīng)的 div 塊中。同時為了顯示不同的表頭樣式，需要添加 id 屬性，在css樣式中實(shí)現(xiàn)樣式的操作，代碼如下：
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);
}
關(guān)于圖表功能的實(shí)現(xiàn)，是調(diào)用 echart.js 插件實(shí)現(xiàn)的，在echart 官網(wǎng)，有非常詳盡的設(shè)計文檔和大量的demo可以參考，我們需要做的只是學(xué)會各個屬性是如何配置的，然后調(diào)用 echart 的方法即可，具體實(shí)現(xiàn)看代碼吧：
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],
}
},
};
}
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
}
講的這里，我設(shè)計的導(dǎo)入EXCEL文件生成圖表的功能的全部實(shí)現(xiàn)了，關(guān)于css 的樣式設(shè)計，可以參考下面的代碼進(jìn)行設(shè)計，不過每個人都有自己的想法，界面如何做的友好，也是前端工程師的一項(xiàng)技能。
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;
}
總結(jié)
以上所述是小編給大家介紹的Javascript 實(shí)現(xiàn) Excel 導(dǎo)入生成圖表功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
表格展示利器 Bootstrap Table實(shí)例代碼
在表格導(dǎo)出數(shù)據(jù)中，發(fā)現(xiàn)設(shè)置了分頁參數(shù)，導(dǎo)出的數(shù)據(jù)僅為表格加載的分頁參數(shù)數(shù)據(jù)，于是，針對這樣的情況，通過設(shè)置分頁參數(shù)的值，使表格可以加載更多的數(shù)據(jù)，可達(dá)到導(dǎo)出所有數(shù)據(jù)的功能需求。下面通過本文給大家分享表格展示利器 Bootstrap Table2017-09-09
Javascript ParentNode和ChildNode接口原理解析
這篇文章主要介紹了Javascript ParentNode和ChildNode接口原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
JavaScript新手必看之var在for循環(huán)中的坑
var這個關(guān)鍵字在JS當(dāng)中是相當(dāng)常用的，但同時配合到for循環(huán)的話會出現(xiàn)不符合預(yù)期的運(yùn)行結(jié)果，所以本文就來為大家講講如何避免這種情況的出現(xiàn)2023-05-05
js實(shí)現(xiàn)文件上傳功能 后臺使用MultipartFile
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)最簡單的文件上傳功能，后臺使用MultipartFile，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要介紹了JS實(shí)現(xiàn)隊(duì)列與堆棧的方法,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)隊(duì)列與堆棧的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04
js function定義函數(shù)使用心得，了解這個才能更進(jìn)一步的了解js面向?qū)ο蠓矫娴闹R。2010-04-04
動態(tài)添加js事件，主要是不用具體指定位置的事件，這種動態(tài)添加事件的方法比較方便，并可以擴(kuò)展等。2009-03-03
這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
JavaScript實(shí)現(xiàn)重置表單（reset）的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)重置表單（reset）的方法,涉及javascript中reset()方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
How to Auto Include a Javascript File
How to Auto Include a Javascript File...2007-02-02