将后台返回的二进制数据下载成文件

首先说一下我的应用场景

我是在做控制台日志的时候，后台是通过websocket返回的二进制数据流，我需要让这些数据可以通过下载按钮下载为.log后缀的日志文件

Blob

在一般的Web开发中，很少会用到Blob，但Blob可以满足一些场景下的特殊需求。Blob，Binary Large Object的缩写，代表二进制类型的大对象。Blob的概念在一些数据库中有使用到，例如，MYSQL中的BLOB类型就表示二进制数据的容器。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。

Blob用法

可以通过Blob的构造函数创建Blob对象：

Blob(blobParts[, options])

参数说明：

• blobParts： 数组类型， 数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。

• options： 可选项，字典格式类型，可以指定如下两个属性：

• type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。
  endings， 默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： “native”，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； “transparent”，表示会保持blob中保存的结束符不变。

    var data1 = "a";
    var data2 = "b";
    var data3 = "<div style='color:red;'>This is a blob</div>";
    var data4 = { "name": "abc" };

    var blob1 = new Blob([data1]);
    var blob2 = new Blob([data1, data2]);
    var blob3 = new Blob([data3]);
    var blob4 = new Blob([JSON.stringify(data4)]);
    var blob5 = new Blob([data4]);
    var blob6 = new Blob([data3, data4]);

    console.log(blob1);  //输出：Blob {size: 1, type: ""}
    console.log(blob2);  //输出：Blob {size: 2, type: ""}
    console.log(blob3);  //输出：Blob {size: 44, type: ""}
    console.log(blob4);  //输出：Blob {size: 14, type: ""}
    console.log(blob5);  //输出：Blob {size: 15, type: ""}
    console.log(blob6);  //输出：Blob {size: 59, type: ""}

我的代码

downLoad(data, filename) {      
    if (navigator.userAgent.indexOf("Edge") > -1) {        
	    // IE version        
	    console.log("IE")        
	    var blob = new Blob([data], { type: 'application/force-download' });        
	    var link = document.createElement('a');        
	    link.href = window.URL.createObjectURL(blob);        
	    link.download = filename;        
	    link.click();      
   }else if (navigator.userAgent.indexOf("Chrome") > -1 && navigator.userAgent.indexOf("Safari") > -1) {        
	    // Chrome version        
	    console.log("Chrome")        
	    var blob = new Blob([data], { type: 'application/force-download' });        
	    const reader = new FileReader();        
	    reader.readAsDataURL(blob);        
	    reader.onload = (e) => {          
		    const a = document.createElement('a');          
		    a.download = filename;          
		    a.href = e.target.result;          
		    document.body.appendChild(a);          
		    a.click();          
		    document.body.removeChild(a);        
	    	};      
	    }else if(navigator.userAgent.indexOf("Firefox") > -1){       
	     // Firefox version       
		     console.log("Firefox")       
		     var file = new File([data], filename, { type: 'application/force-download' });        
		     window.open(URL.createObjectURL(file));      
      }    
},

首先需要考虑浏览器的兼容问题，
downLoad函数的参数：

• data：二进制数据流
• filename：下载时生成的文件名，及文件类型

最后调用该函数

this.downLoad(msg.data,"control_log.log")