记录导入导出模板功能

147 阅读1分钟

项目中遇到了需要导出json数据到本地,并在另一个页面从本地导入的功能。

  • 导出后端数据到本地
    // todo Blob 对象表示一个不可变、原始数据的类文件对象
    // 导出的json对象
    const blob = new Blob([JSON.stringify(portDataRef.current)], { type: 'application/json' });
    // todo 返回新的URL 对象表示指定的 File 对象或 Blob 对象
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = '版本.json'; // todo 此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
    a.click(); // 模拟点击事件

    // todo URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象
    URL.revokeObjectURL(url);
  };
  • 导入本地数据到前端 需要配合Antd的# Upload组件使用
    const fr = new FileReader();
    fr.onload = (e) => {
      const value = JSON.parse(e.target.result);

      props.history.push( // 路由传参
        `/config?businessId=${businessId}&templateId=${templateId}&appId=${appId}&templateName=${templateName}`,
        value
      );
    };
    fr.readAsText(file); // todo 将Blob或File对象根据特殊的编码格式转化为字符串
  };