base64圖片下載(兼容IE10) · 前端學習筆記

[參考](https://blog.csdn.net/Vir_czz/article/details/59580925) ``` //判斷瀏覽器類型 function isBrowser() { 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. } const downloadBase = { // 下載base64的二維碼圖片(谷歌火狐) ffDownload: function(fileName, content) { const a = document.createElement('a'); const event = new MouseEvent('click'); // 下載圖名字 a.download = fileName; //url a.href = content; //合成函數，執行下載 a.dispatchEvent(event); }, // 下載base64的二維碼圖片(ie11) ieDownload: function (fileName,content) { let blob = this.base64ToBlob(content); //new Blob([content]); window.navigator.msSaveBlob(blob, fileName) }, // 下載base64的二維碼圖片 (谷歌edge) downloadFile: function(fileName, content) { let aLink = document.createElement('a'); let blob = this.base64ToBlob(content); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); aLink.download = fileName; aLink.href = URL.createObjectURL(blob); // aLink.dispatchEvent(evt); aLink.click() }, //base64轉blob base64ToBlob: function(code) { let parts = code.split(';base64,'); let contentType = parts[0].split(':')[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); } }; ``` 使用 ``` // isBrowser 和 downloadBase 是通用js文件里定義的 download() { var oQrcode = document.querySelector('#qrcode img'); // src 存放的是base64的圖片 var url = oQrcode.src; const name = "企業二維碼.png"; const browser = isBrowser(); if (browser === "IE") { downloadBase.ieDownload(name, url) } else if (browser === "FF") { downloadBase.ffDownload(name, url); } else { downloadBase.downloadFile(name, url); } }, ```