【使用Blob导出json数据】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

工作中遇到了需要下载json格式文档和上传json格式文档，方便用户导入导出数据使用的需求。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Blob是什么？

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。

二、使用步骤

1.导出数据

代码如下（示例）：

const onExportSpider = () => {
    // todo Blob 对象表示一个不可变、原始数据的类文件对象
    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);
  };

2.读入数据

代码如下（示例）：

import { Upload } from 'antd';
<Upload
  customRequest={onImportVersion}
 >
  <Button
    icon={<UploadOutlined />}
  >
    导入版本
  </Button>
 </Upload>
const onImportVersion = ({ file }) => {
    const fr = new FileReader();
    fr.onload = (e) => { // 当文件读取成功，执行load事件
      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对象根据特殊的编码格式转化为字符串
  };

该处读入json数据，使用路由传参，在另一个页面接收。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了json数据下载上传的操作，而未与服务端有任何交互。