【3】node.js-eCharts柱狀圖-載入本地-單個Excel檔案資料
阿新 • • 發佈:2019-01-25
SheetJS js-xlsx 這個庫是目前使用最多的一個Node.js操作Excel檔案的庫本文主要講解Node.js使用sheetjs庫操作Excel的語法和介面使用方法 cell 物件(JavaScript物件)結構如下:
本文實現的Demo本身為付費資源,請選擇使用。如有需要可以聯絡我QQ3508551694,同時提供定製
安裝:npm install -g xlsx先上結果:上面的基本概念是完全仿照Excel本身結構的(如果你用VB指令碼操作過Excel就知道了),下面的部分會用程式碼段來展示這些概念的具體內涵(如果你對JavaScript的物件結構瞭解的話,你就會知道JavaScript操作資料結構是多麼方便了,遠遠比C++方便,因為成員是動態的,動態的,動態的。。。。。)
對於懂JavaScript語言的人來說,只要一給你結構,剩下的怎麼操作基本就不用案例介紹了(但是對我這樣的初學者來說最好還是有Demo直接點,呵呵)
{
v: 'C7SKY',
w: 'C7SKY',
t: 's',
....
}
v | raw value (see Data Types section for more info)原始的JavaScript型別w | formatted text (if applicable) 格式化的內容(字串形式)t | type: b Boolean, e Error, n Number, d Date, s Text, z Stub單元格的索引單元格的索引有兩種:‘A1’ == {c:0, r:0} 第一種是字串形式的索引: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
worksheet 物件結構如下:{ '!ref': 'A1:C7', A1: { ... }, B1: { ... }, ....}
其中 worksheet['!ref'] 是工作表的有效範圍(基於 A-1)。//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}}
WorkSheet全部資料轉換為jsonconst 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)));
需要注意的是,內建的匯出工具會優先嚐試使用 w 的值,所以如果之後要使用匯出功能,在修改值時應該同時刪除 w 按鍵或設定為 undefined。儲存/匯出通過 XLSX.writeFile(wb, filename) 就可以生成新的表格檔案:XLSX.writeFile(wb, 'output.xlsx');
而 XLSX.utils.sheet_to_* 則提供了多種匯出格式(csv/txt/html/json/formulae),以下是匯出 JSON 檔案的程式碼:const data = XLSX.utils.sheet_to_json(ws);fs.writeFileSync('path/to/export.json', JSON.stringify(data, null, 4));下面的例子就是一個典型的例子:
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