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

目录

• 问题
• 思路
• electron-vue生成脚手架
• 界面部分
• node.js处理部分
• 源码地址

问题

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

界面部分

使用elementUI里的Upload组件，实现拖拽本地文件和文件夹获取本地路径，遇到几个问题：

1. 这里需要注意html根元素需要使用e.preventDefault阻止拖拽文件的默认行为，否则文件拖到网页上浏览器会默认打开

2. 需要实现选择文件夹，由于Upload组件里是使用input[type=“file”]的标签来做的，所以点击出来的文件选择弹框不能选择文件夹，需要进行一下改造，使其弹出系统的选择文件的弹框，因为使用了electron，可以直接使用node.js的接口和依赖包，所以可以这样调起系统的选择文件弹窗:

对Upload组件里的input的默认行为进行改造：

node.js处理部分

引用了node-xlsx的excel处理库，将excel文件解析成一个大数组，然后递归遍历处理数组将数据按照一定的模板规则拆分出来在指定的本地文件夹生成小的excel文件，过程中打印日志记录处理状态

测试了一下，node-xlsx这个库只能处理30M左右的文件，超过30M就会报内存泄漏挂掉了，所以要处理81M的文件只能先手动拆分成几个小于30M的文件再批量逐一处理了，后面看了另外一个库js-xlsx也没有流式解析数据的接口，也不能读大文件，所以只能先手动把大文件拆小后再批量处理了。好像python的库能处理81M的excel文件，后面看看能不能使用node.js调用python的脚本

源码地址

链接: 源码

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览22919 人正在系统学习中

来源：huangbaihei