保存文件(非后台给链接,而是编码后字符串)

关于保存文件，我有问过前端的朋友，做保存文件怎么做，原话是后台给我一个接口，我请求过去然后就有文件我直接下载就可以了。但是我的项目需求是下载mp3和midi文件。然后我问后台接口是什么，后台告诉我没有接口，我给你的base64之后的字符串。

使用blob对象来存储字符串，然后保存。
涉及两个东西
1 文件保存
2 使用blob保存成文件

文件保存

//安装 
npm install file-saver --save
//引入 
import FileSaver from 
//使用
//这就是一般情况下后台给一个接口就可以了
FileSaver.saveAS(url);

blob存储文件内容

blob说明          网址         https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
下面函数涉及blob的第二个参数type的类型 blob的type所有类型

download(fileData) {
    // 要输出的文件内容
    let particleData = fileData;
    // 将指定数据转换为 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));
    }
  } 

以上是一般情况下就可以直接下载了。但是但是我的项目里这样是不可以的。把上方函数的type改为mp3下载下来是不可以播放的，具体原因不详，会研究一下，然后放上我现在使用的封装函数，是可以下载下来mp3且正常播放的。

downloadAudio() {
        let isFileSaverSupported = false;
        try {
          isFileSaverSupported = !!new Blob();
        } catch (e) {
          console.log(e);
        }
        if (isFileSaverSupported) {
          fetch(`data:audio/mp3;base64,${audioData}`)
          .then(response => response.blob())
          .then(function(response) {
            FileSaver.saveAs(response, "audio.mp3")
          });
        }else{
          console.log("保存出错");
        }
    }

以上over!