纯前端下载json文件

最新推荐文章于 2024-07-25 09:24:40 发布

程序员岩哥

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量724

点赞数

分类专栏：前端文章标签：前端 json javascript

本文链接：https://blog.csdn.net/souwer/article/details/130018096

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天帮人解决问题的时候发现了一个很有意思的小东西，分享下。该实例实现前端js生成一个对象，并通过json文件下载。代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下载json文件</title>
</head>
<body>
<div class="form">
	<form>
		<button id="btn">提交</button>
	</form>
</div>

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function (){
		let data = [
			{
			    name: "张三",
			    score: "100"
			},
			{
			    name: "李四",
			    score: "97"
			},
			{
			    name: "王五",
			    score: "96"
			}
		];
        var a = document.createElement('a');
        a.download = "student_scores.json";
        a.style.display="none";
        var dat = JSON.stringify(data,null,4);
        var blob = new Blob([dat],{type:"Application/json"});
		a.href = URL.createObjectURL(blob);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
</script>
</body>
</html>