純前端實現base64圖片下載，兼容IE10+

W_BinaryTree 發布于2019-08-23 11:58 / 2480人閱讀

摘要：在等新版瀏覽器中實現圖片的下載還是比較容易的創建一個標簽將標簽的屬性賦值為圖片的編碼指定標簽的屬性，作為下載文件的名稱觸發標簽的點擊事件但是這套邏輯在下是不行的，這樣寫會直接報錯。

背景

在項目開發過程中，經常會有圖片導出的需求，尤其是帶有圖表類的應用，通常需要將圖表下載導出。
在chrome等新版瀏覽器中實現base64圖片的下載還是比較容易的：

創建一個a標簽

將a標簽的href屬性賦值為圖片的base64編碼

指定a標簽的download屬性，作為下載文件的名稱

觸發a標簽的點擊事件

但是這套邏輯在IE下是不行的，這樣寫會直接報錯。
所以IE下需要多帶帶處理，這里IE在處理這種文件的時候給提供了一個多帶帶的方法：window.navigator.msSaveOrOpenBlob(blob, download_filename)調用這個方法可以直接觸發IE的下載，還是比較方便的。具體做法如下：

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

整體實現代碼

  // 這里是獲取到的圖片base64編碼,這里只是個例子哈，要自行編碼圖片替換這里才能測試看到效果
  const imgUrl = "data:image/png;base64,..."
  // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時候），那么調用該方法去下載圖片
  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()
  }

以上。

云服務器 GPU云服務器 base64編解碼c語言實現 base64圖片生成 ie10兼容模式 base64

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97765.html

JS 下載文件方法分享(解決圖片文件無法直接下載和 IE兼容問題)

摘要：場景簡介由于業務需要，經常遇到下載各類文件的需求，其中最頭疼的莫過于前端下載圖片了，直接給個圖片文件地址會變成直接打開圖片，而不是彈窗提示另存為，研究了下前端實現文件下載最便捷的方法還是創建標簽，寫入屬性實現點擊下載，但這在瀏覽器上的實現又場景簡介由于業務需要，經常遇到下載各類文件的需求，其中最頭疼的莫過于前端下載圖片了，直接給個圖片文件地址會變成直接打開圖片，而不是彈窗提示另存為...

awesome23 2019-08-23 14:49 評論0 收藏0
利用canvas實現圖片下載功能來實現瀏覽器兼容問題

摘要：前言項目中需要實現圖片下載功能，第一個想到的是使用標簽的屬性來實現，但是在不同瀏覽器下測試會發現，有的瀏覽器無效，點擊后直接預覽圖片，所以，上網找到了另外一種兼容不同瀏覽器的圖片下載的方法，那就是利用來處理圖片，實現下載項目中點擊事件綁定點前言:項目中需要實現圖片下載功能，第一個想到的是使用a標簽的download屬性來實現，但是在不同瀏覽器下測試會發現，有的瀏覽器無效，點擊后直接預...

NSFish 2019-08-23 17:50 評論0 收藏0
JS魔法堂之實戰：純前端的圖片預覽

摘要：一前言圖片上傳是一個普通不過的功能，而圖片預覽就是就是上傳功能中必不可少的子功能了。偶然從上找到純前端圖片預覽的相關資料，經過整理后記錄下來以便日后查閱。類型為，表示在讀取文件時發生的錯誤，只讀。一、前言　　圖片上傳是一個普通不過的功能，而圖片預覽就是就是上傳功能中必不可少的子功能了。在這之前，我曾經通過訂閱input[type=file]元素的onchange事件，一旦更改路徑...

岳光 2019-08-21 10:36 評論0 收藏0
瀏覽器端用JS實現創建和下載圖片

摘要：尤其是通過生成文件內容，然后通過瀏覽器端執行下載的操作。日前，項目中就遇到了這類需求，在瀏覽器端實現保存當前網頁為圖片，然后還可以下載。提供了一種創建對象的方法，但是兼容性堪憂，絕大部分瀏覽器都沒有實現。問題場景在前端很多的項目中，文件下載的需求很常見。尤其是通過JS生成文件內容，然后通過瀏覽器端執行下載的操作。如圖片，Execl 等的導出功能。日前，項目中就遇到了這類需求，在瀏覽...

blair 2019-08-23 14:47 評論0 收藏0