小編給大家分享一下純javascript前端如何實現(xiàn)base64圖片下載，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司服務(wù)項目包括黔西網(wǎng)站建設(shè)、黔西網(wǎng)站制作、黔西網(wǎng)頁制作以及黔西網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，黔西網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到黔西省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

背景

在項目開發(fā)過程中，經(jīng)常會有圖片導(dǎo)出的需求，尤其是帶有圖表類的應(yīng)用，通常需要將圖表下載導(dǎo)出。

在chrome等新版瀏覽器中實現(xiàn)base64圖片的下載還是比較容易的：

1. 創(chuàng)建一個a標(biāo)簽

2. 將a標(biāo)簽的href屬性賦值為圖片的base64編碼

3. 指定a標(biāo)簽的download屬性，作為下載文件的名稱

4. 觸發(fā)a標(biāo)簽的點擊事件

但是這套邏輯在IE下是不行的，這樣寫會直接報錯。

所以IE下需要單獨處理，這里IE在處理這種文件的時候給提供了一個單獨的方法：window.navigator.msSaveOrOpenBlob(blob, download_filename)調(diào)用這個方法可以直接觸發(fā)IE的下載，還是比較方便的。具體做法如下：

// 截取base64的數(shù)據(jù)內(nèi)容（去掉前面的描述信息，類似這樣的一段：data:image/png;base64,）并解碼為2進制數(shù)據(jù)
var bstr = atob(imgUrl.split(',')[1]) 
// 獲取解碼后的二進制數(shù)據(jù)的長度，用于后面創(chuàng)建二進制數(shù)據(jù)容器
var n = bstr.length 
// 創(chuàng)建一個Uint8Array類型的數(shù)組以存放二進制數(shù)據(jù)
var u8arr = new Uint8Array(n) 
// 將二進制數(shù)據(jù)存入Uint8Array類型的數(shù)組中
while (n--) {
 u8arr[n] = bstr.charCodeAt(n) 
}
// 創(chuàng)建blob對象
var blob = new Blob([u8arr])
// 調(diào)用瀏覽器的方法，調(diào)起IE的下載流程
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')

整體實現(xiàn)代碼

 // 這里是獲取到的圖片base64編碼,這里只是個例子哈，要自行編碼圖片替換這里才能測試看到效果
 const imgUrl = 'data:image/png;base64,...'
 // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時候），那么調(diào)用該方法去下載圖片
 if (window.navigator.msSaveOrOpenBlob) {
  var bstr = atob(imgUrl.split(',')[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
   u8arr[n] = bstr.charCodeAt(n)
  }
  var blob = new Blob([u8arr])
  window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
 } else {
  // 這里就按照chrome等新版瀏覽器來處理
  const a = document.createElement('a')
  a.href = imgUrl
  a.setAttribute('download', 'chart-download')
  a.click()
 }

以上是“純javascript前端如何實現(xiàn)base64圖片下載”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：純javascript前端如何實現(xiàn)base64圖片下載-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/dcside.html