前端js下载文件的小示例
很久没有自行实现前端下载了,今天突然被问到,写个小demo记录一下!
背景
页面中通过类似于编辑功能,将输入的数据下载到本地。举个例子:
一个代码编辑的功能,我们将输入的数据需要下载下来,并非是通过后端返回值来进行下载,而是将页面上已经存在的值保存为文件。
实现思路
使用 a 标签下载
效果
简单的示例,细节完全没有!!!
实现代码
以下是简单的实现代码:
定义的data模拟JSON数据;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 50%;margin: 200px auto;">
<button onclick="downloadData()">猜猜,会发生什么?</button>
</div>
</body>
<script>
let data = {
name: '猜猜,会发生什么?',
description: '下载到本地啊'
}
function downloadData() {
let url = window.URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)]), {
type: 'application/json'
})
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = new Date().toLocaleString() + '.json'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
</script>
</html>
注意事项
只是简单的示例,有手就行 O(∩_∩)O哈哈~