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值并添加到数组中

1.png

    // 接收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文件就完成了!

如果这篇文章对你有所帮助的话就点个赞吧!

如果你有什么不是实现的地方也可以评论留言!

以前的文章

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值