需求

需要將文件導出保存到本地

效果

tab2.gif

什么是Blob

參考文章如下 ：

前端利用Blob對象創(chuàng)建指定文件并下載

MDN的blob概念

Blob對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。File接口基于Blob，繼承了blob的功能并將其擴展使其支持用戶系統(tǒng)上的文件。

構造函數

var aBlob = new Blob( array, options );

• array 是一個由ArrayBuffer（二進制數據緩沖區(qū)）、ArrayBufferView（二進制數據緩沖區(qū)的array-like視圖）、Blob、DOMString等對象構成的Array，或者其他類似對象的混合體，它將會被放進Blob。DOMStrings會被編碼為UTF-8。
• options 是可選的，它可能會指定如下兩個屬性：
  • type，默認值為 ""，它代表了將會被放入到blob中的數組內容的MIME類型。
  • endings，默認值為"transparent"，用于指定包含行結束符n的字符串如何被寫入。 它是以下兩個值中的一個： "native"，代表行結束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符，或者 "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));
    }
  } 
}