electron+vue3实现excel表格转JSON文件

Excel表格转JSON文件可能在工作中这个需求比较少见（我没遇到过），这边短时间我不是做了一个JSON转Excel表格嘛？我就在想返过来可以嘛，然后就去查了一下在node关键中node-xlsx可以直接读取Excel文件并且返回一个数组，这样不就行了吗？开始干吧！哈哈哈哈

分析

• 1、在渲染进程上传文件并获取file对象
• 2、我们拿到file对象传递给主进程使用node环境node-xlsx解析出来
• 3、然后返回给渲染进程并渲染表格即可
• 4、然后通过js将表格数据导出保存JSON文件即可

安装

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工具桌面软件

• javascript求最大值最小值的另一种写法reduce

• 插件开发并发布到npm，最最简单有效的教程，你确定学不会？

• element-ui动态级联选择器回显问题，二十多行代码就可以搞定

• 小程序云开发，通过云函数进行云开发

• 原生js实现瀑布流效果

• uniapp中的请求接口封装