應用Electron 架構技術操作Excel 文件

鄧杰海

（江西中醫藥高等專科學校教育技術中心，撫州344000）

0 引言

在計算機課程的實踐教學中，上機實踐操作課占的比重較大。在上機過程中，教師有時需要在機房的教師電腦端給學生演示軟件的操作，需要將教師端的電腦屏幕實現發送給學生電腦端；或者在學生上機過程中，也需要實時監控學生的桌面，關注學生在上機過程中的一舉一動，防備學生上機課開小差，操作一些與上課無關的軟件應用，如打游戲、看電影或看小說。為了實現以上兩個目的，使用一套計算機機房教學輔助軟件還是很有必要的。在日常教學中教學輔助軟件也應用了幾個，或多或少都存在一些問題，不能完全滿足要求，因此需要自主開發一套機房輔助軟件。

開發機房輔助軟件的功能模塊中，有一個模塊實現的功能是將上課班級學生的名單導入，并在Electron渲染進程中將班級名單顯示出來，在軟件界面中要響應鼠標事件，將鼠標停留的學生信息能突出的顯示來，從而可以快速地定位到需要關注的學生的電腦上。本文的范圍為將Electron 怎么導入Excel 表格，JavaScript編程語言怎么實現這些功能并操作DOM。以下就各部分的功能及實現的源代碼進行說明。

1 導入Excel文件的實現

在編寫本部分的軟件實現過程中，導入文件使用到的是input type=file 元素來實現本地文件的導入。通過input type=file 元素，可以得到本地文件的file 對象。如果直接使用input type=file 元素，由Chromium開源引擎渲染之后界面不大美觀。為了解決這個問題，需要引用CSS 技術，對input type=file 元素進行處理。文章的篇幅有限，此處就不將Html 語言和CSS 文本樣式計算機語言寫上。

如圖1 所示，在沒有經過CSS 語言處理，input type=file 的外觀確實不美觀。在經過CSS 語言處理和HTML 語言定義之后，就可以得到如圖2 所示的外觀界面。

圖1 未經處理的界面

圖2 經過處理的選擇班級的界面

2 使用JS-XLSX工具庫將Excel文件導入渲染進程的界面中

將要導入的Excel 表頭如圖3 所示。

圖3 導入的Excel文件表頭結構

利用JS-XLSX 工具庫將Excel 文件導入渲染進程的程序清單如下：

var XLSX=require（'xlsx'）；

var Electron=require（'Electron'）.remote；

var stuinfo=require（'./stuinfo'）；

var userinterface=require（'./userInterface'）；

var process_wb=（function（）{

return function process_wb（wb）{

wb.SheetNames.forEach（function（sheetName）{

var worksheet=wb.Sheets[sheetName]；//獲得工作表對象

var colNumArr=['A'，'B'，'C'，'D'，'E'，'F'，'G'，'H'，'I'，'J'，'K'，'L'，'M'，'N']；

//用于Excel 表格每行的編號

var i=2；

var j=0；

//var cell_address='A2'；

var rowVal=[]；

//獲得單元格地址

var cell_address=colNumArr[0]+i；

//獲得單元格地址相對應的單元格對象

var cell_obj=worksheet[cell_address]；

//獲得對應單元格地址的源數據，如果不是undefined 則表示單元格有數據，進入循環進行處理

var cell_val=（cell_obj?cell_obj.v:undefined）；

//如果單元格的源數據不為undefined，則進入循環進行處理

while（cell_val）{

if（cell_val）{

//用于存放獲得的單元格數據的數組的下標

j=0；

//對Excel 表格A～N 列的數據進行處理

colNumArr.forEach（function（colNum）{

//取到第i 行每一列的單元格地址

cell_address=colNum+i；

//獲得對應單元格地址的單元格對象

cell_obj=worksheet[cell_address]；

//獲得相應單元格的源數據

rowVal[j++]=cell_obj.v；

}）；

//console.log（rowVal）；

//獲得的一行的單元格數據push 入存放學生信息的stuinfo 數組，并同時在渲染進程顯示

stuinfo.appendStu（rowVal）；

//調用渲染進程函數，將學生的姓名與學號信息在渲染進程的界面中顯示出來

userInterface.initSrc（rowVal[0]，rowVal[1]）；

//將存放每行單元格數據的臨時數組清空，準備存放下一個學生信息

rowVal.length=0；

}

//調到Excel 表格的下一行

i++；

cell_address=colNumArr[0]+i；

cell_obj=worksheet[cell_address]；

cell_val=（cell_obj?cell_obj.v:undefined）；

}

}）；

}；

}）（）；

var do_file=（function（）{

return function do_file（files）{

var f=files[0]；

var reader=new FileReader（）；

reader.onload=function（e）{

var data=e.target.result；

//獲得Excel 表格的無符號單字節的數組

data=new Uint8Array（data）；

//調用JS-XLSX 工具庫函數process_wb 對數組進行處理

process_wb（XLSX.read（data，{type:'array'}））；

}；

reader.readAsArrayBuffer（f）；

}；

}）（）；

（function（）{

var xlf=document.getElementById（'selectFile'）；

function handleFile（e）{

if（e.target.files.length===0）{

return；

}

let filePath=$（this）.val（）；

let urlArr=filePath.split（"\"）；

let fileName=urlArr[urlArr.length-1]；

$（".fileName"）.val（fileName）；

userinterface.clearScrn（）；

do_file（e.target.files）；

}

//調用input type=file 元素的change 事件獲得打開的Excel文件的File 對象

xlf.addEventListener（'change'，handleFile，false）；}）（）；

以上程序清單中的函數來自GitHub 地址：https://github.com/SheetJS/js-xlsx，對相關的函數作了一些修改，在相關的Demo 程序中，沒有將Excel 的每個單元格進行處理，而是使用XLSX.utils.sheet_to_html 函數將Excel 表格中的數據直接顯示在div 元素中。如此處理顯然不能滿足要求，根據圖3 所示的Excel 表頭，修改了一下GitHub 地址所提供的程序源代碼，如上面的process_wb（wb）函數，對上課班級中的每個學生信息進行處理。

3 在渲染進程的界面中顯示學生信息

在將Excel 本地文件中的數據導入內存數組中同時，也將學生的學號和姓名信息在渲染進程的界面中顯示出來，如圖4 所示是在導入學生信息之前的界面，圖5 是導入學生信息之后的界面。

圖4 導入Excel文件之前渲染進程的界面

圖5 導入Excel學生信息之后的渲染進程界面

以上就是導入班級信息之后再調用渲染進程的initSrc 函數，將學生的姓名和學號在渲染進程的主界面中顯示出來，源代碼如下，文章篇幅有限，就沒有將渲染進程界面中的CSS 文本樣式計算機語言寫上：

//初始化屏幕界面

function initSrc（stuXh，stuXm）{

if（!document）document=window.document；

const mainArea=document.getElementById（'main-areaDJH'）；

const template=document.querySelector（'#scr-maintemp'）；

let clone=document.importNode（template.content，true）；

clone.querySelector（'img'）.src='./public/nologin.svg'；

clone.querySelector（'img'）.setAttribute（'id'，stuXh）；

clone.querySelector（'.stuXhmain'）.innerText=stuXh；

clone.querySelector（'.stuXmmain'）.innerText=stuXm；

mainArea.appendChild（clone）；

const scrleft=document.getElementById（'page-wrapperDJH'）；

const lefttemp=document.querySelector（'#scr-lefttemp'）；

let clone2=document.importNode（lefttemp.content，true）；

clone2.querySelector（'.leftXh'）.innerText=stuXh；

clone2.querySelector（'.leftXm'）.innerText=stuXm；

scrleft.appendChild（clone2）；

}

渲染進程對應的index.html 文件如下：

4 結語

在實現本文論述的功能過程中，在網上找了好多的資料，也學到了很多的東西。但網上的資料都不是太齊全，很多程序源代碼還要靠自己寫出來。通過使用Electron 結構技術開發桌面程序之后，發現使用JavaScript 語言開發桌面程序有天然的優勢，特別應用CSS 文本樣式計算機語言設計渲染進程的界面非常方便，網上資料也非常多，感覺比傳統的桌面開發工具C#、Delphi 和VC 做界面還方便。