前端实现导入,导出功能
<!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>