create-react-app+fileSaver+Blob對象建立指定文件並下載

需求

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

效果

什麼是Blob

參考文章以下 ：

前端利用Blob對象建立指定文件並下載

MDN的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));
    }
  } 
}
  
複製代碼