使用electron-vue写一个处理excel表格小软件(1)

问题

写一个小工具：处理一个81M的excel文件，将其按一定数据规则拆分成多个小的excel文件，可以可视化操作。
大概是这样子的一个东西：

思路

使用vue写一个简单页面获取处理文件的路径，和放置输出文件的文件夹路径， 使用比较熟悉的node.js来写一个处理脚本写处理逻辑，使用electron将vue和node.js整合成一个桌面软件打包出mac端和windows端的安装包

electron-vue生成脚手架

使用electron-vue快速生成项目，使用electron-builder打包项目，遇到几个坑

1. 下载依赖很慢，可能需要翻墙或者使用淘宝镜像，electron-builder的淘宝镜像配置如下，在package.json里配置

"build": {
    // ...
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
    },
    // ...
}

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的脚本

源码地址

链接: 源码