国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

純前端實(shí)現(xiàn)base64圖片下載，兼容IE10+

W_BinaryTree / 2492人閱讀

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

背景

在項(xiàng)目開發(fā)過程中，經(jīng)常會有圖片導(dǎo)出的需求，尤其是帶有圖表類的應(yīng)用，通常需要將圖表下載導(dǎo)出。
在chrome等新版瀏覽器中實(shí)現(xiàn)base64圖片的下載還是比較容易的：

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

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

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

觸發(fā)a標(biāo)簽的點(diǎn)擊事件

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

// 截取base64的數(shù)據(jù)內(nèi)容（去掉前面的描述信息，類似這樣的一段：data:image/png;base64,）并解碼為2進(jìn)制數(shù)據(jù)
var bstr = atob(imgUrl.split(",")[1]) 
// 獲取解碼后的二進(jìn)制數(shù)據(jù)的長度，用于后面創(chuàng)建二進(jìn)制數(shù)據(jù)容器
var n = bstr.length 
// 創(chuàng)建一個Uint8Array類型的數(shù)組以存放二進(jìn)制數(shù)據(jù)
var u8arr = new Uint8Array(n) 
// 將二進(jì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")
整體實(shí)現(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()
  }

以上。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97765.html

相關(guān)文章

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

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

    awesome23 評論0 收藏0

  • 利用canvas實(shí)現(xiàn)圖片下載功能來實(shí)現(xiàn)瀏覽器兼容問題

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

    NSFish 評論0 收藏0

  • JS魔法堂之實(shí)戰(zhàn)：純前端的圖片預(yù)覽

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

    岳光 評論0 收藏0

  • 瀏覽器端用JS實(shí)現(xiàn)創(chuàng)建和下載圖片

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

    blair 評論0 收藏0

發(fā)表評論

0條評論

W_BinaryTree

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<