前端实现导入,导出功能

<!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>

 

posted @ 2022-12-26 14:09  yuwenjing  阅读(234)  评论(0编辑  收藏  举报