問(wèn)題背景
某一天，公司里需要一個(gè)功能，一個(gè)可以把一份參數(shù)多如牛毛的配置文件本地存儲(chǔ)下來(lái)餐塘，本地也可以把文件讀取出來(lái)這樣便利的功能。分析一下這個(gè)需求皂吮，主要就是要以json的格式戒傻，保存，和web頁(yè)面讀取json文件的這樣兩個(gè)功能蜂筹。公司的工程是react編寫(xiě)的需纳，可能對(duì)vue和原生js都有一定了解的你，對(duì)react并不熟悉艺挪，那么候齿，如何解決這個(gè)問(wèn)題
分步解決
一、保存JSON格式的文件
首先闺属，我們假定拿到了一個(gè)json格式的變量
var jsonData;
那么慌盯，再寫(xiě)一個(gè)download的工具類
/*
* 下載文件
* */
function download(content, filename) {
// 創(chuàng)建隱藏的可下載鏈接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符內(nèi)容轉(zhuǎn)變成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 觸發(fā)點(diǎn)擊
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
發(fā)現(xiàn)問(wèn)題！直接download下來(lái)的是沒(méi)有格式化過(guò)的文本掂器，亂成一團(tuán)亚皂，毫無(wú)可讀性可言。一個(gè)formatjson非常重要国瓮！
/*
* 格式化json文件灭必，便于json文件的下載
* */
function formatJson(json, options) {
var reg = null,
formatted = '',
pad = 0,
PADDING = ' ';
options = options || {};
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
reg = /\r\n\,/g;
json = json.replace(reg, ',');
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ':');
}
(json.split('\r\n')).forEach(function (node, index) {
var i = 0,
indent = 0,
padding = '';
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
for (i = 0; i < pad; i++) {
padding += PADDING;
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
}
一行調(diào)用狞谱！
download(formatJson(jsonData), "configuration.json");
二、讀取JSON格式的文件
react有很多輪子禁漓，upload當(dāng)然也有相應(yīng)封裝好的工具跟衅，引入！
（在這之前別忘了npm install react-fileupload -save）
import FileUpload from 'react-fileupload'
寫(xiě)一份配置文件播歼，這個(gè)文件中寫(xiě)出的API這邊有http://www.reibang.com/p/3aa9d5ad41b0
this.options = {
baseUrl: 'https://jsonplaceholder.typicode.com/posts/',
param: {
_c: 'file',
_a: 'UploadFile'
},
chooseFile: this.chooseFile,
doUpload: this.do_upload,
uploading: (progress) => { this.uploading(progress); },
uploadSuccess: this.upload_success,
uploadError: this.upload_error,
uploadFail: this.upload_fail,
}
操作在那邊已經(jīng)很清晰啦伶跷，我就不多說(shuō)了
<FileUpload options={this.options}>
<button ref="chooseBtn">Chose file</button>
<button ref="uploadBtn">upload</button>
</FileUpload>
拿到文件之后，當(dāng)然要把文件內(nèi)容在web上就解析出來(lái)
var self = this;
var reader = new FileReader();
reader.readAsText(files[0]);
reader.onload = function () {
console.log($.parseJSON(reader.result));
var fileContent = $.parseJSON(reader.result)
}
好啦秘狞，fileContent就是里面的內(nèi)容叭莫，json對(duì)象，拿到之后烁试，就可以為所欲為了雇初！
