前端将生成数据保存到本地

前端实现将数据保存到本地

先上效果图

需求：

有时我们(前端)需要将某个数据如:(JSON、数组以及一些其它数据)保存到本地文件(xxx.json、xxx.txt、…)，

实现原理：

通过a标签实现

实现方式：

• 方式一、通过html（注：在vue等响应式框架中适用）

//格式
<!-- <a :href="'data:text/json;charset=utf-8,'+JSON.stringify(要保存的数据)" download='文件名.后缀名'>下载数据</a> -->
//示例
<a :href="'data:text/json;charset=utf-8,'+JSON.stringify(dataJson)" download='data.txt'>下载数据</a>

• 方式二、通过js操作dom实现（注：需在能操作dom的场景中使用）

const domObj = document.createElement('a');
domObj.setAttribute('href', 'data:text/json;charset=utf-8,' + encodeURIComponent('hello world'));//注：如存储数组 or JSON需将其转换为JSON字符串
domObj.setAttribute('download', 'data.txt');
if (document.createEvent) {
    
    
	const event = document.createEvent('MouseEvents');
	event.initEvent('click', true, true);
	domObj.dispatchEvent(event);
} else {
    
    
	domObj.click();
}