資訊專欄INFORMATION COLUMN
摘要：在等新版瀏覽器中實現(xiàn)圖片的下載還是比較容易的創(chuàng)建一個標簽將標簽的屬性賦值為圖片的編碼指定標簽的屬性，作為下載文件的名稱觸發(fā)標簽的點擊事件但是這套邏輯在下是不行的，這樣寫會直接報錯。
背景
在項目開發(fā)過程中，經(jīng)常會有圖片導(dǎo)出的需求，尤其是帶有圖表類的應(yīng)用，通常需要將圖表下載導(dǎo)出。
在chrome等新版瀏覽器中實現(xiàn)base64圖片的下載還是比較容易的：
創(chuàng)建一個a標簽
將a標簽的href屬性賦值為圖片的base64編碼
指定a標簽的download屬性，作為下載文件的名稱
觸發(fā)a標簽的點擊事件
但是這套邏輯在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()
}
以上。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97765.html
摘要：場景簡介由于業(yè)務(wù)需要，經(jīng)常遇到下載各類文件的需求，其中最頭疼的莫過于前端下載圖片了，直接給個圖片文件地址會變成直接打開圖片，而不是彈窗提示另存為，研究了下前端實現(xiàn)文件下載最便捷的方法還是創(chuàng)建標簽，寫入屬性實現(xiàn)點擊下載，但這在瀏覽器上的實現(xiàn)又 場景簡介 由于業(yè)務(wù)需要，經(jīng)常遇到下載各類文件的需求，其中最頭疼的莫過于前端下載圖片了，直接給個圖片文件地址會變成直接打開圖片，而不是彈窗提示另存為...
摘要：前言項目中需要實現(xiàn)圖片下載功能，第一個想到的是使用標簽的屬性來實現(xiàn)，但是在不同瀏覽器下測試會發(fā)現(xiàn)，有的瀏覽器無效，點擊后直接預(yù)覽圖片，所以，上網(wǎng)找到了另外一種兼容不同瀏覽器的圖片下載的方法，那就是利用來處理圖片，實現(xiàn)下載項目中點擊事件綁定點 前言:項目中需要實現(xiàn)圖片下載功能，第一個想到的是使用a標簽的download屬性來實現(xiàn)，但是在不同瀏覽器下測試會發(fā)現(xiàn)，有的瀏覽器無效，點擊后直接預(yù)...
摘要：一前言圖片上傳是一個普通不過的功能，而圖片預(yù)覽就是就是上傳功能中必不可少的子功能了。偶然從上找到純前端圖片預(yù)覽的相關(guān)資料，經(jīng)過整理后記錄下來以便日后查閱。類型為，表示在讀取文件時發(fā)生的錯誤，只讀。 一、前言 圖片上傳是一個普通不過的功能，而圖片預(yù)覽就是就是上傳功能中必不可少的子功能了。在這之前，我曾經(jīng)通過訂閱input[type=file]元素的onchange事件，一旦更改路徑...
摘要：尤其是通過生成文件內(nèi)容，然后通過瀏覽器端執(zhí)行下載的操作。日前，項目中就遇到了這類需求，在瀏覽器端實現(xiàn)保存當前網(wǎng)頁為圖片，然后還可以下載。提供了一種創(chuàng)建對象的方法，但是兼容性堪憂，絕大部分瀏覽器都沒有實現(xiàn)。 問題場景 在前端很多的項目中，文件下載的需求很常見。尤其是通過JS生成文件內(nèi)容，然后通過瀏覽器端執(zhí)行下載的操作。如圖片，Execl 等的導(dǎo)出功能。日前，項目中就遇到了這類需求，在瀏覽...
閱讀 3341·2021-11-19 11:36
閱讀 2944·2021-09-27 13:34
閱讀 2005·2021-09-22 15:17
閱讀 2414·2019-08-30 13:49
閱讀 766·2019-08-26 13:58
閱讀 1366·2019-08-26 10:47
閱讀 2547·2019-08-23 18:05
閱讀 608·2019-08-23 14:25
