项目中遇到了需要导出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对象根据特殊的编码格式转化为字符串
};