前言

在干业务时，需要得到一份全国省市到街道的区划数据，刚好业务中连接了高德地图，高德地图又提供了区划的api，这下只需要把数据写到json里了。什么！你说你还不会用js创建json文件？没关系，只需十分钟阅读文章，学会使用js三种方法创建本地json文件！

一、使用html5创建json文件

通过a标签来下载获取到我们创建的json文件。
缺点：必须要下载一次，下载目录不可控，当大量json文件下载时，会储存到同一个文件夹，显的很杂乱。

<script>
//我们写入json文件的内容
let data={ 
    name:"张三",
    tel:'1008611',
    age:"18"
}
let handleDownload=function(content,name){ 
	            // 下载保存json文件
	            var eleLink = document.createElement("a");
	            eleLink.download = name+'.json';
	            eleLink.style.display = "none";
	            // 字符内容转变成blob地址
	            var data = JSON.stringify(content, undefined, 4);
	            var blob = new Blob([data], {  type: "text/json" });
	            eleLink.href = URL.createObjectURL(blob);
	            // 触发点击
	            document.body.appendChild(eleLink);
	            eleLink.click();
	            // 然后移除
	            document.body.removeChild(eleLink);
	        }
this.handleDownload(data,'测试数据')
</script>

结果：

二、通过fs.writeFile

使用fs的好处可以省略下载步骤，且下载目录是可控的。可以适应更为复杂的业务。（不会真以为前端不用学node吧？A.A）

const fs=require('fs')
// writeFile()可以接收四个参数，第一个是路径，第二个是文件内容，
//第三个可选项代表权限，第四个是回调函数。这里第三个参数通常省略
let data={ 
    name:"张三",
    tel:'1008611',
    age:"18"
}
//将javascript对象转换为json字符串
data = JSON.stringify(data, undefined, 4);
fs.writeFile('./js/test1.json',data,err=>{ 
    if(err){ 
        console.log('写入出错了');
    }else{ 
        console.log('文件写入成功');
    }
})

结果：

三、通过fs Stream流

通过Stream流，使步骤、流程更加清晰。也可以在流程中进行更多操作

const fs=require('fs')
let data={ 
    name:"张三",
    tel:'1008611',
    age:"18"
}

data = JSON.stringify(data, undefined, 4);
// 创建一个可以写入的流，写入到文件 newJs.txt 中
var writerStream = fs.createWriteStream('newJs.json');
// 使用 utf8 编码写入数据
writerStream.write(data,'UTF8');
// 标记文件末尾
writerStream.end();
// 处理流事件 完成和报错时执行
writerStream.on('finish', function () { 
    console.log("写入完毕");
});
writerStream.on('error', function (err){ 
    console.log(err.stack);
});
console.log("程序执行完毕");

结果：