Javascript 實現 Excel 匯入生成圖表功能
阿新 • • 發佈：2018-12-16
本文系原創，轉載請註明出處：
有一段時間沒有寫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) { //檔案流轉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;
}好了，今天的文章就到這裡了，新人新手，歡迎大家多多指教！如有疑問，歡迎評論留言。