通过html5实现本地json文件的读取和保存

通过html5实现本地json文件的读取和保存

今天有个需求，让我把cad的json格式数据，转换成另一种格式的数据。然后我就想怎么读取和保存json文件。上网搜了下，大致如下：

一、读取本地JSON文件

1. 首先使用标签创建一个读取的按钮

2. 然后选择本地的json文件后使用FileReader读取json文件的内容，此时读取的结果是字符串

3. 将读取的结果字符串使用JSON.parse转为json格式，之后再使用

    <div>
	<input type="file" id="files"/>
   </div>
 
    <script>
        var inputElement = document.getElementById("files");
        inputElement.addEventListener("change", handleFiles, false);
        function handleFiles() {
           var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
           var name = selectedFile.name;//读取选中文件的文件名
           var size = selectedFile.size;//读取选中文件的大小
           console.log("文件名:"+name+"大小："+size);
           var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
            reader.readAsText(selectedFile);//读取文件的内容
 
            reader.onload = function(){
                console.log("读取结果：", this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
 
                console.log("读取结果转为JSON：");
                let json = JSON.parse(this.result);
                console.log(json.name);
                console.log(json.age);
            };
 
        }
    </script>

结果如下图

二、JSON文件的保存

1. 引入FileSaver.js文件

2. FileSaver.js文件下载地址（我是直接script引入链接）

3. 使用标签创建一个保存按钮

4. 点击标签保存时，调用saveAs方法保存json内容

    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

    <input type="button" id="export" value="保存"/>
 
    <script>
     var button = document.getElementById("export");
     button.addEventListener("click", saveHandler, false);
     function saveHandler(){
            let data = {pens};//我这里pens是个数组
            var content = JSON.stringify(data);
            // var content = data;
            var blob = new Blob([content],{type: ""} );
            //  {type: "text/plain;charset=utf-8"}  //保存为txt文件（记事本）
             
            var today = new Date();
            let date=today.toLocaleString( ); //获取日期与时间
            saveAs(blob, date+".json");    //保存为json文件
     }
 
    </script>

参考: 使用HTML5来实现本地文件读取和写入 .（FileReader读取json文件，FileSaver.js保存json文件）