js对java后台获取到的文件base64，进行下载操作

项目中，在后台进行jpg、png、world、excel等等文件的上传，并转化为base64存到数据库中，在前台使用到这个base64进行相应文件的下载。

后台代码：

@RequestMapping(value="save")
@ResponseBody
public Map<String,Object> save(HttpServletRequest request,HttpServletResponse response,@RequestParam Map<String, Object> params, @RequestParam("files") MultipartFile  files) throws Exception{		
		String message = "";
		String Code = "";
		Map<String,Object> map = new HashMap<String,Object>();
		int rst = 0;
		UserInfo userInfo = userSession.getUserInfo();
		//上传图片
		if(files.getSize()/1024/1024/1024/10>=2){
			message = "保存样表失败:附件大小不能大于200K！";
		}
		
		//通过base64转化图片
		BASE64Encoder encoder = new BASE64Encoder();
		String filesStr = encoder.encode(files.getBytes());
		params.put("ybimg", filesStr);
		//得到上传文件的文件名及后缀
		String fileName = files.getOriginalFilename();
		params.put("yb_wjm", fileName);
		
		/*新增*/
        int rst = 0 ;
		rst = bdzsMinServiceImpl.tianJiaJueSeXinXi(params);
	    if (rst<=0) {
			message = "保存失败";
            code = "200";
		}else {
			message = "保存["+MapGetter.getString(params, "gnmc")+"]成功";
			code = "100";
		}
		
		map.put("code", code);
		map.put("message", message);
		return map;
	}

前台js代码：

//html页面
<img id="yangbiao" src="" />
<input type="button" class="zhs-btn" onclick="xiazai();" value="下载">


//js部分
//加载页面,
var ybimg;//文件的base64串
var ybimg_wjm;//文件的文件名
function onload () {
		var param = {
			mac:'12345678'
		};	 
		$.ajax({
			url:'${basePath}bdzslquery.do',
			type:'post',
			dataType:'json',
			data:param,
			async:false,
			success:function (data) {
				$("#loading-box").toggle();//加载条
				console.log(data);
				// 判断返回数据当前状态
				if(data.code == "00"){
					//为页面赋值,这是图片的显示方法
					$("#yangbiao").attr("src","data:image/jpeg;base64,"+data.data.ybimg);
					ybimg = data.data.ybimg;
					ybimg_wjm = data.data.ybimg_wjm;
					console.log(ybimg)
				}else{
					alert(data.msg);
				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {//弹出报错内容　　
				 alert(XMLHttpRequest.status);
                 alert(XMLHttpRequest.readyState);
                 alert(textStatus);
		    }
		});	 
	};

//下载的功能按钮的方法
//下载需要用到文件的base64和含有后缀的文件名， 能够进行下载。
function xiazai(){
	if (ybmb == "" || ybmb == null || ybmb == "null" || ybmb == "undefined" || ybmb == undefined) {
    alert("没有文件可供下载！");
    } else {
		if (window.navigator.msSaveOrOpenBlob) {//这是 IE 特有的方法,判断是否是ie浏览器
            //如果ie浏览器调用window.btoa()这个方法报错的话，可以采取把base64传到后台进行下载
			$.ajax({
				type:"post",
				url:"${basePath}base64xiazai.do",
				data:{base64:ybimg,wjm:ybimg_wjm},
				dataType:"json",
				success:function(result){
					if (result == "1") {
                        alert("文件已经下载,请到【D/"+ybmb_wjm+"】");
				    }
                }
			 });
				 
		 } else {
			//其他浏览器下载
		    downloadFile(ybmb_wjm,ybmb);
		 }		 
	}	
}
	 
//下载
function downloadFile(fileName,content) {
	      const blob = this.base64ToBlob(content); // new Blob([content]);
	      if (window.navigator.msSaveOrOpenBlob) {//这是 IE 特有的方法,判断是否是ie浏览器
	        navigator.msSaveBlob(blob, fileName);
// 	        navigator.msSaveOrOpenBlob(blob, fileName);
	      } else {
	        const link = document.createElement('a');
	        link.href = window.URL.createObjectURL(blob);
	        link.download = fileName;
	 
	        //此写法兼容可火狐浏览器
	        document.body.appendChild(link);
	        const evt = document.createEvent("MouseEvents");
	        evt.initEvent("click", false, false);
	        link.dispatchEvent(evt);
	        document.body.removeChild(link);
	      }
    	}

//将base64转化成blob字段
function base64ToBlob(code) {
	//const parts = code.split('base64,');
	//const contentType = parts[0].split(':')[1];
	const raw = window.atob(code);
	const rawLength = raw.length;
	const uInt8Array = new Uint8Array(rawLength);
	for (let i = 0; i < rawLength; ++i) {
	     uInt8Array[i] = raw.charCodeAt(i);
	}
	return new Blob([uInt8Array]);
}