【2022-10-13】前端js下载文件的小示例

最新推荐文章于 2023-09-06 16:30:05 发布

lookingForw_4585

最新推荐文章于 2023-09-06 16:30:05 发布

阅读量118

点赞数

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

本文链接：https://blog.csdn.net/weixin_43797046/article/details/127297530

版权

前端同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

经验分享

16 篇文章 0 订阅

订阅专栏

前端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>