<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json文件下载</title>
</head>
<body>
<div class="download">
<button>下载</button>
</div>
<script>
var eleButton = document.querySelector('button');
// 下载文件方法
var funDownload = function(content, filename) {
var eleLink = document.createElement('a');//创建了一个a标签
eleLink.download = filename;//设置要下载的文件名
eleLink.style.display = 'none';//设置a标签隐藏
// 字符内容转变成blob地址
var blob = new Blob([content]);//可以看作是存放二进制数据的容器（file接口基于blob）
console.log(blob);
eleLink.href = URL.createObjectURL(blob);//将数据生成一个路径
console.log(eleLink.href);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
//obj
var json_str = { "people": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
]};
var str = JSON.stringify(json_str);//将json格式转为字符串再存入
//判断浏览器是否支持a标签的download属性
if('download' in document.createElement('a')) {
eleButton.addEventListener('click', function() {
funDownload(str, 'coordinate.json');//调用
});
} else {
eleButton.onclick = function() {
alert('浏览器不支持');
};
}
</script>
</body>
</html>
