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)文章
javascript設(shè)計模式 – 備忘錄模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計模式 – 備忘錄模式,結(jié)合實(shí)例形式分析了javascript備忘錄模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
Maps Javascript...2007-01-01
這篇文章主要介紹了JS自定義混合Mixin函數(shù),涉及javascript面向?qū)ο蟪绦蛟O(shè)計中函數(shù)與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
JavaScript Array對象擴(kuò)展indexOf()方法
JavaScript中Array對象沒有indexOf()方法，可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05
JavaScript中in和hasOwnProperty區(qū)別詳解
in操作符只要通過對象能訪問到屬性就返回true。hasOwnProperty()只在屬性存在于實(shí)例中時才返回true。下面通過本文給大家分享JavaScript中in和hasOwnProperty區(qū)別詳解，感興趣的朋友一起看看吧2017-08-08
js中?new?Date().getTime()得到的是毫秒數(shù)時間戳
今天在寫一個函數(shù)的時候需要用的一個時間戳方便調(diào)用不同的隨機(jī)數(shù)?那么時間戳就是比較好的方式，主要怕瀏覽器緩存數(shù)據(jù)，下面就為大家簡單介紹一下2023-07-07
JS中將圖片base64轉(zhuǎn)file文件的兩種方式
這篇文章主要介紹了JS中圖片base64轉(zhuǎn)file文件的兩種方式,實(shí)現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能，然后再上傳至服務(wù)器，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
作用域（scope）是javascript語言的基石之一，在構(gòu)建復(fù)雜程序時可能是最頭痛的東西,所以這里羅列了五句話輕松搞定并且附上了示例。給需要的朋友參考學(xué)習(xí)。2016-07-07
關(guān)于Javascript加載執(zhí)行優(yōu)化的研究報告
這篇文章主要介紹了關(guān)于Javascript加載執(zhí)行優(yōu)化的研究報告,需要的朋友可以參考下2014-12-12
JS將滑動門改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法
這篇文章主要介紹了JS將滑動門改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法,涉及JavaScript頁面元素遍歷及樣式替換的相關(guān)技巧,再通過onmouseover與onclick即可分別實(shí)現(xiàn)滑動門與選項(xiàng)卡兩種效果,需要的朋友可以參考下2015-09-09