纯前端js直接导入导出json文件

最新推荐文章于 2024-05-22 21:31:48 发布

shenzhipeng1023

最新推荐文章于 2024-05-22 21:31:48 发布

阅读量5.3k

点赞数 9

分类专栏： js代代码库文章标签： json文件导出 json数据导入 js导出数据为json js导入json数据

本文链接：https://blog.csdn.net/jason_renyu/article/details/125751187

版权

js代代码库专栏收录该内容

26 篇文章 0 订阅

订阅专栏

现在很多公司都有多个测试环境或者其他环境，有些配置信息在其他环境需要同样的信息，按照传统只能修改数据库对于新手小白来说只能求助于服务端了，现在前端也可以直接将当前的数据导出为json文件，然后在需要的地方导入即可也不需要服务端，相对比较方便，而且还比较灵活。
遵循本博客传统，话不多说上代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>json导入导出</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    .box {
      width: 100%;
      height: 100%;
      display: flex;
    }

    .main {
      width: 500px;
      margin-right: 20px;
    }

    .top {
      height: 50px;
      line-height: 50px;
      overflow: hidden;
    }

    .show-json {
      width: 500px;
      height: 600px;
      background-color: #f5f5f5;
      padding: 15px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="main">
      <div class="top"><span>默认JSON数据</span><button id="exportBtn">导出数据</button></div>
      <pre class="show-json" id="exportBox"></pre>
    </div>
    <div class="main">
      <div class="top">
        <input type="file" name="file" id="importBtn">
      </div>
      <pre class="show-json" id="importBox" style="color: #f00;">导入的数据</pre>
    </div>
  </div>
</body>
<script>
  // 默认JSON数据
  const defaultData = {
    name: '赵二丫',
    age: 18,
    descript: '婷婷玉立',
    address: '河南省郑州市',
    iphone: '1234567788',
    worker: 'front-end',
    hobby: [
      { name: '动漫' }, { name: '游戏' }
    ]

  }

  // 显示当前内容
  document.getElementById('exportBox').innerHTML = JSON.stringify(defaultData, null, 2);

  // 导出数据 --------------------------------------- Start
  /**
   * 导出JSON文件的方法，导出并直接进行下载
   * 
   * @param {Object|JSONString} 传入导出json文件的数据, 格式为json对象或者json字符串
   * @param {String}  导出json文件的文件名称
   */
  const exportFileJSON = (data = {}, filename = 'dataJSON.json') => {
    if (typeof data === 'object') {
      data = JSON.stringify(data, null, 4);
    }
    // 导出数据
    const blob = new Blob([data], { type: 'text/json' }),
      e = new MouseEvent('click'),
      a = document.createElement('a');

    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
    a.dispatchEvent(e);
  }

  // 点击导出按钮
  document.getElementById('exportBtn').onclick = () => {
    exportFileJSON(defaultData, 'example.json');
  }

  // 导出数据 --------------------------------------- End
  // 导入数据 --------------------------------------- Start
  /**
   * 导入数据的方法
   * @param {EventObject} 传入的参数为onchange的事件源event
   * @returns 返回为promise，then为数据，reject为报错信息
   */
  const importFileJSON = (ev) => {
    return new Promise((resolve, reject) => {
      const fileDom = ev.target,
        file = fileDom.files[0];

      // 格式判断
      if (file.type !== 'application/json') {
        reject('仅允许上传json文件');
      }
      // 检验是否支持FileRender
      if (typeof FileReader === 'undefined') {
        reject('当前浏览器不支持FileReader');
      }

      // 执行后清空input的值，防止下次选择同一个文件不会触发onchange事件
      ev.target.value = '';

      // 执行读取json数据操作
      const reader = new FileReader();
      reader.readAsText(file); // 读取的结果还有其他读取方式，我认为text最为方便

      reader.onerror = (err) => {
        reject('json文件解析失败', err);
      }

      reader.onload = () => {
        const resultData = reader.result;
        if (resultData) {
          try {
            const importData = JSON.parse(resultData);
            resolve(importData);
          } catch (error) {
            reject('读取数据解析失败', error);
          }
        } else {
          reject('读取数据解析失败', error);
        }
      }
    });

  }
  // 回显数据
  const showImportData = (data) => {
    document.getElementById('importBox').innerHTML = JSON.stringify(data, null, 4);
  }
  // 导入文件的事件
  document.getElementById('importBtn').onchange = (event) => {
    importFileJSON(event).then((res) => {
      console.log('读取到的数据', res);
      // 回显数据
      showImportData(res);
    }).catch((err) => {
      console.log(err);
    });
  }

  // 导入数据 --------------------------------------- End


</script>

</html>

代码里边注释较为清晰，方法也可以直接拿来使用的，如果在使用过程中遇到什么问题，欢迎在评论区留言，我们一起交流。
如果对您有所帮助，还希望您能点赞关注。

shenzhipeng1023

关注

9
点赞
踩
26

收藏

觉得还不错? 一键收藏
4
评论
纯前端js直接导入导出json文件

现在很多公司都有多个测试环境或者其他环境，有些配置信息在其他环境需要同样的信息，按照传统只能修改数据库对于新手小白来说只能求助于服务端了，现在前端也可以直接将当前的数据导出为json文件，然后在需要的地方导入即可也不需要服务端，相对比较方便，而且还比较灵活。遵循本博客传统，话不多说上代码：代码里边注释较为清晰，方法也可以直接拿来使用的，如果在使用过程中遇到什么问题，欢迎在评论区留言，我们一起交流。如果对您有所帮助，还希望您能点赞关注。...
复制链接

扫一扫