<!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>
标签：const,前端,导出,JSON,json,导入,reject,data From： https://www.cnblogs.com/yuwenjing0727/p/17005706.html