成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

W_BinaryTree / 2537人閱讀

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

背景

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

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

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

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

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

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

// 截取base64的數(shù)據(jù)內(nèi)容（去掉前面的描述信息，類(lèi)似這樣的一段：data:image/png;base64,）并解碼為2進(jìn)制數(shù)據(jù)
var bstr = atob(imgUrl.split(",")[1]) 
// 獲取解碼后的二進(jìn)制數(shù)據(jù)的長(zhǎng)度，用于后面創(chuàng)建二進(jìn)制數(shù)據(jù)容器
var n = bstr.length 
// 創(chuàng)建一個(gè)Uint8Array類(lèi)型的數(shù)組以存放二進(jìn)制數(shù)據(jù)
var u8arr = new Uint8Array(n) 
// 將二進(jìn)制數(shù)據(jù)存入U(xiǎn)int8Array類(lèi)型的數(shù)組中
while (n--) {
  u8arr[n] = bstr.charCodeAt(n) 
}
// 創(chuàng)建blob對(duì)象
var blob = new Blob([u8arr])
// 調(diào)用瀏覽器的方法，調(diào)起IE的下載流程
window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png")
整體實(shí)現(xiàn)代碼 
  // 這里是獲取到的圖片base64編碼,這里只是個(gè)例子哈，要自行編碼圖片替換這里才能測(cè)試看到效果
  const imgUrl = "data:image/png;base64,..."
  // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時(shí)候），那么調(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等新版瀏覽器來(lái)處理
    const a = document.createElement("a")
    a.href = imgUrl
    a.setAttribute("download", "chart-download")
    a.click()
  }

以上。

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

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

相關(guān)文章

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

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

    awesome23 評(píng)論0 收藏0

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

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

    NSFish 評(píng)論0 收藏0

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

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

    岳光 評(píng)論0 收藏0

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

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

    blair 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<