Electron+Vue+ElementUI excel文件合并
一、需求
excel表格式如上，前面14行的数据不要，最后一行不要，只要中间标题以及内容，多个表合并成一个excel：如下
二、效果
上部分：上次ecxel文件，上传完之后，点击合并按钮开始合并
下部分：打印日志，包括：错误日志，成功日志
桌面就会出现一个以当前日期命名的excel合并文件。
当然，如果你传入的格式不对，则会提示你格式错误，如下：
三、代码
目录结构：
该项目的主要难点就是一个，如何前后端通信，
1）在background.js 使用ipcMain监听通信
- 在mupload.vue组件中使用electron的ipcRenderer,发送通信
如下：
<template>
<div
class="mupload"
v-loading="loading.staus"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<el-upload
action="#"
class="upload-component"
drag
multiple
:file-list="fileList"
:auto-upload="false"
:on-remove="handleRemove"
:on-change="handleChange"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击此处</em>
</div>
</el-upload>
<el-button
class="mupload-button"
style="margin-left: 10px"
size="small"
type="success"
@click="submitUpload"
>点击合并</el-button
>
</div>
</template>
<script>
// import { Upload } from "element-ui";
const { ipcRenderer } = require("electron");
import log from "electron-log";
// import { mapState } from "vuex";
export default {
components: {
// Upload,
},
data() {
return {
fileList: [],
// loading: false
};
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList;
},
handleRemove(file, fileList) {
this.fileList = fileList;
},
submitUpload(e) {
let fileList = this.fileList;
if (fileList.length == 0) {
this.$message.error("请上传文件");
return;
}
fileList = fileList.map((v) => v.raw.path);
this.$store.dispatch("changeLoading", {
staus: true,
clean: false,
});
log.info(`文件导入中... <br />`);
ipcRenderer.send("uploadChooseExcel", fileList);
},
downloadFile() {
// 下载合并文件
}
},
computed: {
...Vuex.mapState(["loading",'loading']),
},
watch: {
'loading.clean'(newVal,oldVal) {
if(newVal) {
this.fileList = []
}
}
}
};
</script>
<style>
.mupload {
display: flex;
justify-content: center;
}
.el-upload-list {
height: 200px;
overflow-y: auto;
}
.mupload-button {
height: 30px;
margin-top: 70px !important;
}
</style>
上面的文件中使用：ipcRenderer.send(“uploadChooseExcel”, fileList); 发送文件列表。
import { ipcMain } from "electron";
const fs = require('fs');
// node path模块
const path = require('path');
const xlsx = require('node-xlsx');
import log from 'electron-log';
import { formatDate } from '@/utils';
// 收集所有的文件路径
var lists = []; // 储存所有数据
var oPath = __dirname.slice(0, __dirname.indexOf('dist_electron'))
log.transports.file.resolvePath = () => path.resolve(`${oPath}/log/${formatDate(new Date(), 'yyyy-MM-dd')}.log`);
log.transports.console.level = 'silly';
export const getExcel = (webContents) => {
ipcMain.on("uploadChooseExcel", function (event, arg) {
fileDisplay(arg)
});
};
const fileDisplay = files => {
//根据文件路径读取文件，返回文件列表
log.info(`读取配置中...<br />`)
files.forEach((filename, index) => {
//获取当前文件的绝对路径
// fs.stat(path)执行后，会将stats类的实例返回给其回调函数。
log.info(`读取文件${filename}<br />`)
fs.stat(filename, (eror, stats) => {
if (eror) return log.error(`Error:(spec)${eror} <br />`);
// 是否是文件
const isFile = stats.isFile();
// 是否是文件夹
const isDir = stats.isDirectory();
if (isFile) {
if (filename.includes('.xls') || filename.includes('xlsx')) { // excel文件
//读取Excel文件
var data = xlsx.parse(filename);
var list1 = data[0].data
let excelHeader = [
'保单号',
'批单号',
'类别',
'期次',
'险种',
'客户',
'业务员',
'个团',
'新旧车',
'合作网点',
'含税保费',
'净保费',
'出单时间',
'保费收入',
'原比例%',
'本次比例%',
'本次手续费/经纪费(人民币)',
'手续费增值税',
'合计支付含增值税金额'
]
let configPath = path.join(oPath, `/config.txt`)
fs.exists(configPath, (exists) => {
if (!exists) {
var filePath = path.join(oPath, `/config.txt`); // 创建txt
fs.writeFileSync(filePath, excelHeader);//
createMerge(list1, excelHeader, index, files, filename)
return
}
fs.readFile(configPath, (err, data) => {
var string = data.toString()
var arr = [];
if (string) {
arr = string.split(',').map(v => v.trim());
}
createMerge(list1, arr.length == 0 ? excelHeader : arr, index, files, filename)
})
})
} else {
log.error(`${filename}：不是excel文件 <br />`)
}
}
// 如果是文件夹
if (isDir) fileDisplay(filename);
})
});
}
function getNowMonths() {
let timeOne = new Date();
let year = timeOne.getFullYear();
let month = timeOne.getMonth() + 1;
let day = timeOne.getDate();
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
const NOW_MONTHS_AGO = `${year}-${month}-${day}`;
return NOW_MONTHS_AGO;
}
function createMerge(list, excelHeader, index, files, filename) {
let sum = 0, isTrue = false, lineNum = 0;
for (let i = 0; i < list.length; i++) {
if (isTrue) break
if (excelHeader.length != list[i].length) {
continue;
}
for (let j = 0; j < list[i].length; j++) {
if (excelHeader[j] == list[i][j]) {
lineNum = i
isTrue = true
sum++;
}
}
}
if (sum != excelHeader.length) {
return log.error(`${filename}：表头与规定的格式不匹配 <br />`);
}
var tempList = list.slice(lineNum + 1, list.length - 1);
lists = lists.concat(tempList)
if (index == files.length - 1) { // 全部读取完
try {
lists.unshift(excelHeader)
const options = {}
var desktop = `${require('os').homedir()}\\Desktop`
var buffer = xlsx.build([{ name: 'sheet1', data: lists }], options);
var date = getNowMonths()
var filePath = path.join(desktop, `/${date}.xlsx`); // 存储路劲和文件名
fs.writeFileSync(filePath, buffer, { 'flag': 'w' });//
log.info(`合并文件成功，文件储存在桌面,路径为：${require('os').homedir()}\\Desktop\\${date}.xlsx <br />`)
} catch (err) {
if (err.errno == -4082) {
log.error(`上传失败，上一个合并的文件正在打开，请关闭之后再重新上传待合并文件 <br />`)
}
}
lists = [];
isTrue = false
}
}
大概主要的就是这些，其实还是有很多优化的，后续会优化一下。
四、后续
噢，对了，还有一个设置表头的功能
log.error(上传失败，上一个合并的文件正在打开，请关闭之后再重新上传待合并文件 <br />)
}
}
lists = [];
isTrue = false
}
}
大概主要的就是这些，其实还是有很多优化的，后续会优化一下。
#### 四、后续
噢，对了，还有一个设置表头的功能
[外链图片转存中...(img-dRD6tXcl-1662538336371)]
[外链图片转存中...(img-yOUqn6PP-1662538336371)]
该功能就是excel默认表头，可以手动设置，一次设置，后面就按照设置的来，其实就是设置了一个txt文件，从该文件进行读取而已。