js 下载Base64格式数据图片（兼容主流浏览器）

最近的工作内容和前端有关。需要做一个图片下载的功能，然而后台只提供了byte[] 类型的图片数据，并且返回给前端的是Base64格式图片数据。那么，就遇到了最严重的问题了：浏览器兼容。

展示图片的时候，各个浏览器大家都一样，都可以这样来

<img src="data:image/jpeg;base64,/.....="/>

然而，在提供下载的时候，总有人要搞事情(说的就是你啦——IE)。在经过多方搜索，解决了这个麻烦。

感谢这几个帖子的引导：

http://www.imooc.com/article/16403?block_id=tuijian_wz 慕课网的这篇博客，帮助我建立了最初的下载结构，后续我已经测试修改了里面关于对浏览器的判断。

https://segmentfault.com/q/1010000005816241 segmentfault的这篇问答，帮助我找到了Base64转Blob的方法。

http://www.cnblogs.com/huxdiy/p/6124208.html cnblogs的这篇博客，提供了兼容IE浏览器下载功能的方案。

注：本人是windows系统，测试的safari不能下载，手机（UC浏览器）不能下载。

下面是是我综合后的代码：

点击a标签后，会调用 oDownLoad(url) 这个方法，其中 url 是Base64格式的图片数据。

function oDownLoad(url) {console.log(myBrowser());if (myBrowser() === "IE") { //IE  //|| myBrowser() === "Edge"odownLoad.href = "#";// SaveAs5(url);downloadFile("下载.jpg", url);} else { //!IE var blob = base64Img2Blob(url);url = window.URL.createObjectURL(blob);odownLoad.href = url; odownLoad.download = "";}
}var odownLoad = null;$(function () {
// id="download"是一个a标签odownLoad = document.getElementById("downLoad");odownLoad.onclick = function () {var src = $('.big_img').attr("src");oDownLoad(src);}
});

下一步会调用判断浏览器的方法 myBrowser() ，这里面的 if 的顺序都是经过我测试得到的。浏览器版本不同，标识符可能会不一样。除safari（windows版）,opera不是最新浏览器外，其余均为最新版本浏览器（截止2017年3月2日）。

//判断浏览器类型
function myBrowser() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("OPR") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览器 OPR/43.0.2442.991//if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; }; //判断是否IE浏览器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Firefox浏览器  Firefox/51.0if (userAgent.indexOf("Trident") > -1) { return "IE"; } //判断是否IE浏览器  Trident/7.0; rv:11.0if (userAgent.indexOf("Edge") > -1) { return "Edge"; } //判断是否Edge浏览器  Edge/14.14393if (userAgent.indexOf("Chrome") > -1) { return "Chrome"; }// Chrome/56.0.2924.87if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2

判断完毕后，针对非IE浏览器，创建一个Blob对象，然后再二进制化，就可以下载了。

 var blob = base64Img2Blob(url);url = window.URL.createObjectURL(blob);odownLoad.href = url; odownLoad.download = "";

针对IE浏览器，需要调用另外一个方法 downloadFile(fileName,content) 。创建Blob对象的方法是一样的，不同的是，IE浏览器不能用a标签的属性 a.download，而是要用IE浏览器自己的方法 window.navigator.msSaveBlob(blob,fileName) 。

//支持IE11
function downloadFile(fileName, content) {var blob = base64Img2Blob(content);//支持IE11window.navigator.msSaveBlob(blob, fileName);
}

这样，就完成了Base64格式数据图片的下载。

关于 safari浏览器的兼容测试，后续我找到 Mac设备以后，才可以修改了。

js 下载Base64格式数据图片（兼容主流浏览器）相关推荐

js下载文件及命名（兼容多浏览器）
js文件下载 ; 文件下载方法 ; IE中文件下载的方法 ; 使用IE下载 ; 文件下载兼容性 ; a标签下载 ; 浏览器下载函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10, ...
Js下载文件到本地（兼容多浏览器）
在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...
base64格式的图片数据如何转成图片
base64格式的图片数据如何转成图片一.总结一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. 1 // $base_img是获取到前端传递的值 2 $base_ ...
前端 img标签显示 base64格式的图片
在做项目的时候,我从后端返回了一个base64格式的图片文件,想把它渲染在前端页面上,找了一下午都没有找到办法,最后终于找到了资料!哈哈! 解决办法就是这样后来又找了相关用法,总结如下: data: ...
base64格式的图片上传阿里云
base64格式的图片上传阿里云上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...
前端 img标签显示 base64格式的图片
前端 IMG 标签显示 BASE64 格式的图片 <img src="data:image/jpeg;base64,这里加base64编码" alt="" ...
[待解决]自定义头像时使用vue-cropper进行图片裁剪，得到的是base64格式的图片，如何对接file类型的api接口
[待解决]自定义头像时使用vue-cropper进行图片裁剪,得到的是base64格式的图片,如何对接file类型的api接口百度很多都没用,有想法欢迎指点.
在浏览器查看base64格式的图片
在浏览器查看base64格式的图片主要用于查看图片,注意' ,': 在浏览器地址栏输入: data:image/jpeg;base64, base64字符串然后回车,就可以看到图片例子: dat ...
python3将base64格式的图片保存为MD5值的图片
python3将base64格式的图片保存为MD5值的图片 import os, base64 import cv2 import numpy as np import hashlib# QQ 273 ...

js 下载Base64格式数据图片（兼容主流浏览器）

js 下载Base64格式数据图片（兼容主流浏览器）相关推荐

最新文章

热门文章