javascript处理json/base64等数据并且下载成本地json/image文件（angular环境、execCommand）

github地址：https://github.com/chuanzaizai/execCommand_downlaod

1、最近项目有这样一个需求：后端返回json字符串、base64数据，前端处理并且下载成本地文件

2、技术栈： angular、window.navigator.userAgent、document.execCommand（IE浏览器）、a标签的download属性

3、下面对相关代码做如下说明：

（1）判断浏览器类型和版本（此处重点是IE版本），如果是IE,则返回版本号，否则返回false

this.judgeIE = function() {
					// 获取浏览器类型和版本
				    var ua = window.navigator.userAgent;
				    // 打印本机chrome：Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36
				    var msie = ua.indexOf('MSIE ');
				    if (msie > 0) {
				      // IE 10- => return 版本号
				      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
				    }
				    var trident = ua.indexOf('Trident/');
				    if (trident > 0) {
				      // IE 11 => return v版本号
				      var rv = ua.indexOf('rv:');
				      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
				    }
				    var edge = ua.indexOf('Edge/');
				    if (edge > 0) {
				      // IE 12 => return 版本号
				      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
				    }
				    // 除IE外的其余浏览器
				    return false;
			  	},

（2）如果是IE浏览器，则调用document.execCommand('saveAs'）（可简单理解为windows下鼠标右键‘另存为’功能）

document.execCommand的一些参考文档：http://blog.csdn.net/woshinia/article/details/18664903

 /*
			     下载json文件方法(IE浏览器)
				 @content:jsonn内容
				 @filename:下载后的文件名称
				 @extension:下载后的文件后缀名 
			    */
			    this.jsonDownload = function(content, filename, extension){
				  	  var BOM = '\uFEFF';
				      angular.element('body').append('<iframe id="SaveAsId" style="display: none"></iframe>');
				      var frameSaveAs = angular.element('body > iframe#SaveAsId')[0].contentWindow;
				      content = BOM + content;
				      frameSaveAs.document.open('text/json', 'replace');
				      frameSaveAs.document.write(content);
				      frameSaveAs.document.close();
				      frameSaveAs.focus();
				      var t1 = Date.now();
				      // 其他浏览器，调用windows的鼠标右键‘另存为’功能
				      frameSaveAs.document.execCommand('saveAs', false, filename + '.' + extension);
				      var t2 = Date.now();
				      // 如果保存为json文件失败，则保存为txt文件
				      if (t1 === t2) {
				        frameSaveAs.document.execCommand('saveAs', true, filename + '.txt');
				      }
				      // 下载完成后删除dom节点
				      angular.element('body > iframe#SaveAsId').remove();
			  	},

/*
			     下载json文件方法(非IE浏览器)
				 @content:jsonn内容
				 @filename:下载后的文件名称
				 @extension:下载后的文件后缀名 
			    */
			  	this.jsonDownloadChrome = function(content, filename, extension){
				  	  var BOM = '\uFEFF';
				      content = 'data:image/svg;charset=utf-8,' + BOM + encodeURIComponent(content);
				      // 创建a标签
				      angular.element('body').append('<a id="SaveAsId"></a>');
				      var saveAsElement = angular.element('body > a#SaveAsId');
				      saveAsElement.attr('href', content);
				      // 调用a标签的download属性
				      saveAsElement.attr('download', filename + '.' + extension);
				      saveAsElement.attr('target', '_blank');
				      saveAsElement[0].click();
				      saveAsElement.remove();
			  	},

/*
			     下载image方法
				 @content:图片base64内容
				 @filename:下载后的文件名称
				 @extension:下载后的文件后缀名 
			    */
			  	this.imageDownload = function(content, filename, extension) {
			  		var BOM = '\uFEFF';
			  		content = 'data:image/png;base64,' + content;
			      	angular.element('body').append('<a id="SaveAsId"></a>');
			      	var saveAsElement = angular.element('body > a#SaveAsId');
			      	saveAsElement.attr('href', content);
			      	saveAsElement.attr('download', filename + '.' + extension);
			      	saveAsElement.attr('target', '_blank');
			      	saveAsElement[0].click();
			      	saveAsElement.remove();
			  	}