使用electron-vue寫一個處理excel表格小軟件

問題

寫一個小工具：處理一個81M的excel文件，將其按一定數據規則拆分成多個小的excel文件，可以可視化操作。
大概是這樣子的一個東西：

思路

使用vue寫一個簡單頁面獲取處理文件的路徑，和放置輸出文件的文件夾路徑， 使用比較熟悉的node.js來寫一個處理腳本寫處理邏輯，使用electron將vue和node.js整合成一個桌面軟件打包出mac端和windows端的安裝包

electron-vue生成腳手架

使用electron-vue快速生成項目，使用electron-builder打包項目，遇到幾個坑

1. 下載依賴很慢，可能需要翻牆才行
2. 在mac上打包成安裝包的時候一直報這個錯：
   
   查了好久最後將electron-builder的版本升到最高級就解決了

界面部分

使用elementUI裏的Upload組件，實現拖拽本地文件和文件夾獲取本地路徑，遇到幾個問題：

1. 這裏需要注意html根元素需要使用e.preventDefault阻止拖拽文件的默認行爲，否則文件拖到網頁上瀏覽器會默認打開

const html = document.querySelector('html')
html.ondragenter = html.ondragover = html.ondragleave = html.ondrop = e => {
  e.preventDefault()
}

2. 需要實現選擇文件夾，由於Upload組件裏是使用input[type=“file”]的標籤來做的，所以點擊出來的文件選擇彈框不能選擇文件夾，需要進行一下改造，使其彈出系統的選擇文件的彈框，因爲使用了electron，可以直接使用node.js的接口和依賴包，所以可以這樣調起系統的選擇文件彈窗:

const { shell } = require('electron')
const os = require('os')
// methods
showItemInFolder () {
	shell.showItemInFolder(os.homedir())
}

對Upload組件裏的input的默認行爲進行改造：

// mounted
this.$refs.elUploadFile.$refs['upload-inner'].$refs.input.onclick = (e) => {
 	e.preventDefault()
  	this.showItemInFolder()
}

node.js處理部分

引用了node-xlsx的excel處理庫，將excel文件解析成一個大數組，然後遞歸遍歷處理數組將數據按照一定的模板規則拆分出來在指定的本地文件夾生成小的excel文件，過程中打印日誌記錄處理狀態

const xlsx = require('node-xlsx')
const fs = require('fs')

// 讀文件和解析文件
const file = fs.readFileSync(sourcePath)
const workSheetsFromBuffer = xlsx.parse(file)

// 遞歸遍歷處理數據
// ...

// 打包文件和寫文件
const buffer = xlsx.build([{name: `mySheetName`, data: output}])   
fs.writeFileSync(`${folderPath}/${folderName}/${subFolderName}/${fileName}.xlsx`, buffer)

測試了一下，node-xlsx這個庫只能處理30M左右的文件，超過30M就會報內存泄漏掛掉了，所以要處理81M的文件只能先手動拆分成幾個小於30M的文件再批量逐一處理了，後面看了另外一個庫js-xlsx也沒有流式解析數據的接口，也不能讀大文件，所以只能先手動把大文件拆小後再批量處理了。好像python的庫能處理81M的excel文件，後面看看能不能使用node.js調用python的腳本

源碼地址

鏈接: 源碼