vue3 导入导出json文件

导入json

   // 这是选择本地文件的弹框 这里display:none隐藏了，DOM依旧存在
   <input
    type="file"
    id="files"
    ref="refFile"
    style="display: none"
    v-on:change="fileLoad"
 />

获取DOM，触发他的点击事件

 const refFile = ref(null);
 
 const addFileHandle = () => {
    refFile.value.click();
  };

当选中文件自动触发change事件

  // 选中json文件change事件
  const fileLoad = () => {
    const selectedFile = refFile.value.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
      if (!reader.result) return;
      try {
        const data = JSON.parse(reader.result);
        // 具体需求的逻辑 data 就是导入的数据是 对象格式
        treeData.value = getTreeData(data);
        initSourceDataAfter(treeData.value);
      } catch (error) {
        message.error('导入失败，请检查文件内容！');
      } finally {
        refFile.value.value = '';
      }
    };
    reader.readAsText(selectedFile);
  };

华丽分割线
导出json

   import { saveAs } from 'file-saver';   // npm i file-saver
   
  // 导出json文件;
  const outFileHandle = () => {
   // new Bolb()第一个参数就是我们要导出的json数据
    const blob = new Blob([JSON.stringify(getNewSource())], { type: 'text/plain;charset=utf-8' });
    console.log('导出json', blob);
    saveAs(blob, `mapde.json`); // 后面的是json文件的默认名称
  };