怎么使用Javascript下载文件 json文件下载

suoniao 2020-10-20
需要:0索币

<!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>

回帖
  • 消灭零回复
广告一下
程序员转型,副业赚钱教程
相关主题
利用webdav协议实现文件删除功能客户端代码 0
利用WebDAV协议实现文件下载功能 代码 0
怎么使用Javascript下载文件 json文件下载 0
QT实现HTTP文件下载功能 0
QT利用QNetworkAccessManager实现FTP文件下载功能 0
Qt实战分布式网盘系统实战Qt文件上传下载 0
Qt5实战教程之翻金币游戏开发 0
利用C++库QT实现秘钥分发系统 秘钥协商 校验 查看服务 0
最新C++入门到实战教程 c++实现计算器和QQ登录框 0
Qt开发物联网智能网关项目教程 0
Qt开发打地鼠游戏实战 QT学生管理系统实战教程 0
大龄程序员转型、程序员副业赚钱实战教程合集 0
程序员副业赚钱之抖音短视频制作实战教程 0
程序员副业赚钱之程序员投资赚钱实战教程 0
程序员副业赚钱之利用抖音短视频获取收入实战 0
程序员副业赚钱之抖音电商实战教程 0
程序员副业赚钱之利用豆瓣引流赚钱实战 0
程序员副业赚钱之抓住自媒体风口月入过万不是问题今日头条实战 0
程序员副业赚钱之靠搬运视频赚钱实战 0
程序员副业赚钱之靠写作技术文章实现收益 写作教程 0
相关主题
Qt实战分布式网盘系统实战Qt文件上传下载 0
Qt5实战教程之翻金币游戏开发 0
利用C++库QT实现秘钥分发系统 秘钥协商 校验 查看服务 0
最新C++入门到实战教程 c++实现计算器和QQ登录框 0
Qt开发物联网智能网关项目教程 0
Qt开发打地鼠游戏实战 QT学生管理系统实战教程 0
大龄程序员转型、程序员副业赚钱实战教程合集 0
程序员副业赚钱之抖音短视频制作实战教程 0
程序员副业赚钱之程序员投资赚钱实战教程 0
程序员副业赚钱之利用抖音短视频获取收入实战 0
程序员副业赚钱之抖音电商实战教程 0
程序员副业赚钱之利用豆瓣引流赚钱实战 0
程序员副业赚钱之抓住自媒体风口月入过万不是问题今日头条实战 0
程序员副业赚钱之靠搬运视频赚钱实战 0
程序员副业赚钱之靠写作技术文章实现收益 写作教程 0
程序员副业赚钱之利用知乎引流实现月入过万实战 0
程序员副业赚钱之利用个人IP打造月入5万项目 0
程序员副业赚钱之利用社群营销 打造躺赚个人号 0
程序员副业赚钱之靠运行公众号月入10万多哦 0
程序员副业赚钱之打造一个赚钱的快手号 0