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

来源：互联网发布：ubuntu安装apache2 php 编辑：程序博客网时间：2024/06/05 04:32

最近的工作内容和前端有关。需要做一个图片下载的功能，然而后台只提供了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.0    if (userAgent.indexOf("Trident") > -1) { return "IE"; } //判断是否IE浏览器  Trident/7.0; rv:11.0    if (userAgent.indexOf("Edge") > -1) { return "Edge"; } //判断是否Edge浏览器  Edge/14.14393    if (userAgent.indexOf("Chrome") > -1) { return "Chrome"; }// Chrome/56.0.2924.87    if (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) 。

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

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

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

1 0