JS将内存中的数据下载到本地（.json .txt）

最新推荐文章于 2024-04-21 22:15:16 发布

静尾

最新推荐文章于 2024-04-21 22:15:16 发布

阅读量1.2k

点赞数 1

分类专栏：无所不能的JavaScript Vue3.0 文章标签： javascript json vue

本文链接：https://blog.csdn.net/qq_41176306/article/details/115730609

版权

无所不能的JavaScript 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

25 篇文章 3 订阅

订阅专栏

该博客介绍了如何利用JavaScript在浏览器环境中将内存中的数据以JSON或TXT格式下载到本地。通过创建隐藏的a标签，设置download属性，转换数据为Blob对象，并模拟点击事件来触发文件下载。这种方法适用于前端开发，实现用户友好且无须服务器交互的数据导出功能。

摘要由CSDN通过智能技术生成

JS将内存中的数据下载到本地（.json .txt）

原理：

创建一个a标签
为a标签设置download属性，属性值为下载的文件名（注：文件名后缀是什么，下载的文件类型就是什么，如a.json a.txt，更好的实践是可用时间戳+后缀命名）
将a标签的display设为none
将数据转为JSON格式存到二进制对象Blob的一个实例中
将a标签插入到页面中
在a标签上模拟点击事件
删除a标签

实践：

export default function (fileName: string, fileMsg: any) {
    const elementA = document.createElement('a');

    elementA.download = fileName;
    elementA.style.display = 'none';

    const blob = new Blob([JSON.stringify(fileMsg)]);

    elementA.href = URL.createObjectURL(blob);
    document.body.appendChild(elementA);
    elementA.click();
    document.body.removeChild(elementA);
}