Excel表格转JSON文件可能在工作中这个需求比较少见（我没遇到过），这边短时间我不是做了一个JSON转Excel表格嘛？我就在想返过来可以嘛，然后就去查了一下在node关键中 node-xlsx 可以直接读取Excel文件并且返回一个数组，这样不就行了吗？开始干吧！哈哈哈哈
yarn add node-xlsx // or
npm install node-xlsx
这儿我是用的element-plus上传组件；然后通过on-change监听数据文件file；以下代码是json和Excel相互转换的封装方法，也有简化版
const onChange = (file: any, fileList: any) => {
console.log(p.type.value == "excel-json");
if (file.size >= '1048576') {
return ElMessage.error('JSON文件不得大于1M');
const name = file.name;
const fileIndex = name.lastIndexOf('.');
const fileType = name.substring(fileIndex+1);
if (!['xls','xlsx'].includes(fileType.toString())) return ElMessage.error('请上传xls、xlsx格式表格');
// 将文件路径发送到主进程
ipcRenderer.send("reader-excel-file", file.raw.path);
const onChange = (file: any, fileList: any) => {
console.log(p.type.value == "excel-json");
if (file.size >= '1048576') {
return ElMessage.error('JSON文件不得大于1M');
const name = file.name;
const fileIndex = name.lastIndexOf('.');
const fileType = name.substring(fileIndex+1);
console.log(fileType === 'xlsx');
if (p.type.value == "excel-json") { // 表格转josn
if (!['xls','xlsx'].includes(fileType.toString())) return ElMessage.error('请上传xls、xlsx格式表格');
ipcRenderer.send("reader-excel-file", file.raw.path);
}else if (p.type.value == "json-excel") { // json转表格
if (!['json'].includes(fileType.toString())) return ElMessage.error('请上传JSON单文件');
ipcRenderer.send("reader-json-file", file.raw.path);
emit('setUploadChange',file.name);
主进程接收读取文件
其实这个跟上篇文章electron+vue3+ts开发了一个JSON工具桌面软件大体是一致的，大家可以借鉴！
引入文件：
const xlsx = require("node-xlsx")
读取Excel：
* 读取excel文件
ipcMain.on('reader-excel-file',(event, filePath)=>{
const sheets = xlsx.parse(filePath);
//读取xlxs的sheet1
const sheetData = sheets[0].data;
// 获取数据以后返回数据给渲染进程
win.webContents.send('reader-excel-file-data',sheetData);
渲染进程获取主进程返回的数据
返回的数据需要迭代处理组装，因为返回的数据是一个一维数组，表格的key值是第一个数据，我们需要将key值迭代好以后转为二维数组，如下图：
迭代的时候我是将第一组（也就是key值保存到一个数组中），然后再循环遍历的时候通过索引去拿取key值并添加到数组中
// 接收Excel文件
ipcRenderer.on("reader-excel-file-data", (event, value) => {
let list =
meansJs.meJstype(value) === "string" ? JSON.parse(value) : value;
let title = [] as any;
let excel = [] as any;
let isExcelShow = true;
for (const i in list) {
const listName = list[i];
let fields = {} as any;
for (const n in listName) {
if (i == "0") {
title.push(listName[n]);
isExcelShow = false;
} else {
isExcelShow = true;
const nameN = title[n];
fields[nameN] = listName[n];
if (!isExcelShow) continue;
excel.push(fields);
data.excelData = JSON.parse(JSON.stringify(excel));
tableHtml(data.excelData);
渲染表格的逻辑与上篇文章相同，没有做任何改变，大家可以参考上一篇文章electron+vue3+ts开发了一个JSON工具桌面软件渲染表格
导出JSON文件
* 数据转json文件
* @param stringData 数据
* @param filename 文件名称
dataToJSONFile(stringData:string,filename:string = 'json-toll') {
const blob = new Blob([stringData], {
type: "application/json",
// 根据 blob生成 url链接
const objectURL = URL.createObjectURL(blob);
// 创建一个 a 标签Tag
const aTag = document.createElement("a");
// 设置文件的下载地址
aTag.href = objectURL;
// 设置保存后的文件名称
aTag.download = filename + ".json";
// 给 a 标签添加点击事件
aTag.click();
if (aTag) {
aTag.remove()
做到这儿Excel转JSON文件就完成了！
如果这篇文章对你有所帮助的话就点个赞吧！
如果你有什么不是实现的地方也可以评论留言！
以前的文章
前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新
electron+vue3+ts开发了一个JSON工具桌面软件
youtiao66
Node.js