【3】node.js-eCharts柱狀圖-載入本地-單個Excel檔案資料
阿新 • • 發佈：2019-01-25
SheetJS js-xlsx 這個庫是目前使用最多的一個Node.js操作Excel檔案的庫本文主要講解Node.js使用sheetjs庫操作Excel的語法和介面使用方法
本文實現的Demo本身為付費資源，請選擇使用。如有需要可以聯絡我QQ3508551694，同時提供定製
安裝：npm install -g xlsx先上結果：
上面的基本概念是完全仿照Excel本身結構的（如果你用VB指令碼操作過Excel就知道了），下面的部分會用程式碼段來展示這些概念的具體內涵（如果你對JavaScript的物件結構瞭解的話，你就會知道JavaScript操作資料結構是多麼方便了，遠遠比C++方便，因為成員是動態的，動態的，動態的。。。。。）
對於懂JavaScript語言的人來說，只要一給你結構，剩下的怎麼操作基本就不用案例介紹了（但是對我這樣的初學者來說最好還是有Demo直接點，呵呵）
{
v: 'C7SKY',
w: 'C7SKY',
t: 's',
....
}第一種是字串形式的索引：worksheet['A1']返回Excel第一行第一列的內容
第二種是JavaScript Object物件作為索引：這種物件只有行列兩個成員，每個成員賦值為整數
獲取單元格通過 worksheet[address_of_cell] 獲取單元格，也就是通過 A1 標記的鍵名來獲取單元格：const cell = wb['C7'];
const cell = wb[XLSX.utils.encode_cell({ r: 7, c: 2 })]; // 等同於 wb['C7']編輯單元格cell.v = '小影志';delete cell.w;workbook 物件結構如下：import XLSX from 'xlsx';const wb = XLSX.readFile('path/to/file.xlsx'); // 返回 workbook
{
SheetNames: ['Sheet1', 'Sheet2'],
Sheets: {
'Sheet1': { ... },
'Sheet2': { ... }
},
Props: { ... },
....
}const ws = wb.Sheets[workbook.SheetNames[0]]; // 返回 worksheet{ '!ref': 'A1:C7', A1: { ... }, B1: { ... }, ....}//range
const range = xlsx.utils.decode_range(worksheet['!ref']);//將A1:C7轉換為json格式
console.log('' + JSON.stringify(range));//{"s":{"c":0,"r":0},"e":{"c":3,"r":13}}const range = xlsx.utils.decode_range(worksheet['!ref']);
console.log('range:' + JSON.stringify(range));//{"s":{"c":0,"r":0},"e":{"c":3,"r":13}}
console.log('sheet_to_json:' + JSON.stringify(xlsx.utils.sheet_to_json(worksheet)));XLSX.writeFile(wb, 'output.xlsx');下面的例子就是一個典型的例子：
Node.js讀取Excel本地資料傳送給瀏覽器eChart展示柱狀圖
Node.js服務端app.js程式碼
var http = require("http");
var fs = require("fs");
var xlsx = require("xlsx");
function onRequest(request, response){
console.log("Request received.");
response.writeHead(200,{"Content-Type":'text/plain','charset':'utf-8','Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});//可以解決跨域的請求
//如果是xls這種老版本的Excel2007檔案，要記得另存為xlsx型別再使用！否則報錯！
var workbook = xlsx.readFile("柱狀圖-資料.xlsx");
var first_sheet_name = workbook.SheetNames[0];
console.log('' + first_sheet_name);
//worksheet
var worksheet = workbook.Sheets[first_sheet_name];
//range
const range = xlsx.utils.decode_range(worksheet['!ref']);
console.log('range:' + JSON.stringify(range));//{"s":{"c":0,"r":0},"e":{"c":3,"r":13}}
console.log('sheet_to_json:' + JSON.stringify(xlsx.utils.sheet_to_json(worksheet)));
var sheet_to_json = xlsx.utils.sheet_to_json(worksheet);
console.log('sheet_to_json:' + JSON.stringify(sheet_to_json));
console.log('sheet_to_json length:' + sheet_to_json.length);
console.log('typeof sheet_to_json[0]:' + JSON.stringify(sheet_to_json[0]));
//下面的這個結構是百度EChart給的標準Demo的結構，我們拿過來把資料替換成我們從Excel中讀取到的資料
var option = {
"title": {
"text": "銷量分佈直方圖"
},
"tooltip": {},
"legend": {
"data": ["銷量"]
},
"xAxis": { "data": ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] },
"yAxis": {},
"series": [{
"name": "銷量1",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20, 100]
}]
};
for (let i = 0; i < sheet_to_json.length ; ++i) {
console.log(sheet_to_json[i].date);
option.xAxis.data[i] = sheet_to_json[i].date;
option.series[0].data[i] = sheet_to_json[i].count1;
}
console.log('option:' + JSON.stringify(option));
response.write(JSON.stringify(option));
response.end();
}
http.createServer(onRequest).listen(8080);
console.log("Server has started.port on 8080\n");Excel資料檔案
效果圖：
全部程式碼：
有需要的可以聯絡我QQ3508551694