需求
需要将文件导出保存到本地
效果
tab2.gif
什么是Blob
参考文章如下 ：
Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
构造函数
var aBlob = new Blob( array, options );
- array 是一个由ArrayBuffer（二进制数据缓冲区）、ArrayBufferView（二进制数据缓冲区的array-like视图）、Blob、DOMString等对象构成的Array，或者其他类似对象的混合体，它将会被放进Blob。DOMStrings会被编码为UTF-8。
- options 是可选的，它可能会指定如下两个属性：
- type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
- endings，默认值为"transparent"，用于指定包含行结束符n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变。
示例
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
应用
安装fileSaver(github地址)
npm install file-saver --save
// 引入模块
import FileSaver from 'file-saver';
export default class App extends Component {
// 点击下载
downFile = () => {
this.download();
}
// 下载文件
download() {
// 要输出的文件内容
let particleData = store.getEmitterJson;
// 将指定数据转换为 JSON 字符串
let content = JSON.stringify(particleData, null, 2);
// 数组内容的MIME类型为json
let type = "data:application/json;charset=utf-8";
// 实例化Blob对象，并传入参数
let blob =new Blob([content], {type: type});
let isFileSaverSupported = false;
try {
isFileSaverSupported = !!new Blob();
} catch (e) {
console.log(e);
}
if (isFileSaverSupported) {
FileSaver.saveAs(blob,"particleData.json");
}else{
FileSaver.open(encodeURI(type + "," + content));
}
}
}
