electron+vue3+ts开发了一个JSON工具桌面软件

雾恋
3,188 阅读3分钟

需求

最近没事看见有很多博主在写古诗词的相关网站，然后我就去看他们的数据，发现他们现在保存的格式都是json文件（GitHub），导致我无法保存到数据库中使用，然后我就想JSON文件如果可能转为db格式的文件不就好了吗？但是这个时候需要用到什么技术呢？

源码

该项目的源码我放到GitHub上面了，如果大家感兴趣的话可以拉下来看看；

json-tool工具GitHub仓库

如果你不想看代码想直接使用功能的话，也是可以直接下载软件使用；目前只支持win x64位系统

我后续也会将其他的功能开发更新，给大家目前的版本是无感安装；他会自动下载并在你不使用的时候进行安装

json-tool工具软件

以下是效果图

Snipaste_2023-01-12_16-41-01.png

分析

  • 这个时候我想到electron可以使用node环境，既然可以使用node那么就能读取JSON文件了
  • 读取到JSON文件以后可以利用本地数据库（sqlite3）去将数据保存到db文件中
  • 想到这儿开心的跳了起来，根据这个逻辑几乎能实现；但是我目前还没做
  • 我目前做的是将JSON转为excel表格并且可以导出文件，目前已经做好
  • 后面有空将更新db文件的实现

技术

  • electron 13.0.0
  • vue3 + ts
  • element-plus
  • electron-updater
  • less
  • meansjs
  • xlsx
  • file-saver

如果你不会搭建electron + vue3 + ts + 热更新的话，我后续会更新新的文章

读取JSON文件

  • 我们在上传JSON文件的时候会得到一个file文件
  • 然后文件中有一个path路径
  • 我们只需要将path路径传递给主进程进行处理

node 环境读取path路径JSON文件

在读取成功以后将读取到的数据返回给渲染环境

  /**
   * 读取json文件
   */
  ipcMain.on('reader-json-file',(event, filePath)=>{
    
    fs.readFile(filePath,"utf8",(err:any, data:any)=>{
      if(err) return console.error(err);
      // 返回json数据
      win.webContents.send('reader-json-file-data',data);
    })
  })

然后再渲染环境中获取json数据并进行处理

    ipcRenderer.on("reader-json-file-data", (event, value) => {
      let list =
        meansJs.meJstype(value) === "string" ? JSON.parse(value) : value;
      // 关闭上传
      // if (list.length) data.isTableShoww = false;
      data.table = list;

      tableHtml(list);
    });

渲染表格

我们在拿到数据以后，不知道是什么字段代表什么意思（也就是字段是未知的）；这个时候怎么办呢？我们需要去循环数组以后在迭代对象获取k值，并将其渲染

以上就是基本逻辑，代码逻辑请看下面这个函数

    let html = `<table style="border-collapse: collapse;">`;
     // 渲染页面模块
    const tableHtml = (listData: []) => {
    const table = document.querySelector(".table");
    let headerShow = true;
    const list = listData;

      for (const i in list) {
        const isObj = !!Object.keys(list[i]).length;

        // 标题头部
        if (isObj && headerShow) {
          const objectList: any = list[i] as {};
          html += `<tr>`;
          html +=
            `
          <td style="border: 1px solid #393e46; min-width: 40px;
          outline: none;padding: 10px; font-size: 16px;
          ">
          ` +
            "序号" +
            "</td>";
          for (const n in objectList) {
            if (i == "0" && headerShow) {
              html += `
              <th style="border: 1px solid #393e46; font-weight:700;
              outline: none;padding: 10px;
              ">${n}</th>
              `;
            }
          }
          html += "</tr>";
          headerShow = false;
        }

        html += `<tr>`;

        // 索引
        html +=
          `
        <td style="border: 1px solid #393e46; min-width: 40px;
          color: #222831;outline: none;padding: 10px;
        "> ${Number(i) + 1} </td>
        `;

        if (isObj) {
          const objectList: any = list[i] as {};
          for (const n in objectList) {
            html += `<td
            style="border: 1px solid #393e46;min-width: 50px;
            color: #222831; font-size: 14px;outline: none;padding: 10px;
            ">${objectList[n]}</td>`;
          }
        }

        html += "</tr>";
      }
      html += "</table>";

      // console.log(html);

      table && (table.innerHTML = html);
    };

导出excel表格

安装依赖

yarn add file-saver // and
yarn add xlsx

引入

import FileSaver from 'file-saver'
// import XLSX from 'xlsx' // vue2

import * as XLSX from 'xlsx' // vue3

代码

    // 导出表格
    const setExportForm = () => {
        // xls、xlsx
        // console.log(document.querySelector('table'));
        if (!document.querySelector('table')) {
            return ElMessage.error('暂无表格，请导入JSON');
        };
        const wb = XLSX.utils.table_to_book(document.querySelector('table'))
        /* #table 就是表格的id*/
        const wbout = XLSX.write(wb,{
            bookType:'xlsx',
            bookSST:true,
            type:'array'
            })
        try {
            FileSaver.saveAs(
            new Blob([wbout], {type:'application/octet-stream'}),
            `${data.fileName}.xlsx`
            )
        } catch (e) {
            if (typeof console !== 'undefined') {
                console.log(e, wbout)
            }
        }
        return wbout;
    }

以前的文章

结束

以上就是JSON文件转表格的全过程，如果大家喜欢的话就收藏一下吧！

avatar
文章
阅读
粉丝