背景 👣
后台管理系统的配置页面，需要新增导出和上传配置的功能按钮，要求导出的文件格式为
json格式。如果直接返回url的话，浏览器会自动预览，因此直接在前端中生成下载文件
方法一：a标签 👾
- 创建a标签，添加属性
href，设置 Data URI，添加属性download，设置文件名称，完成点击下载 encodeURIComponent()字符串作为 URI 组件进行编码（形如%XX%XX%XX的格式）
const config = configs ? JSON.stringify(configs, null, '\t') : ''; // json 数据
const element = document.createElement('a')
element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(config));
element.setAttribute('download', '文件名称');
element.style.display = 'none';
element.click();
Data URI
-
URI是用于获取资源，包括其附加的信息的一种协议。URL 属于 URI 的子集，如果 URI 的附加信息为地址，则此时 URI 变为 URL（注意的是 data URI 不是 URL，因为它并不包含资源的公共地址）
-
Data URI 是由 RFC 2397 定义的一种把小文件直接嵌入文档的方案
- 格式：
data:[mime type][;charset=][;[base64] - data: - URI的协议头，表示其资源是一个data URI
- [mime type] - 表示数据呈现的格式，默认
text/plain - [;charset=] - 表示字符集
- [;[base64] - 表示数据的编码方式，如不使用base64编码格式，可以使用标准的URL编码方式(形如%XX%XX%XX的格式)
- 格式：
方法二：FileSaver 👾
-
安装
npm install file-saver --save -
引入
import {saveAs} from 'file-saver'; -
使用
const config = configs ? JSON.stringify(configs, null, '\t') : '';
let str = new Blob([config], {type: 'text/plain;charset=utf-8;charset=utf-8'});
//saveAs(str, `config.json`);
saveAs(str, `config.txt`);
