JavaScript實(shí)現(xiàn)下載base64數(shù)據(jù)并兼容低版本
詳細(xì)步驟如下
1、解析 Base64 數(shù)據(jù):
如果數(shù)據(jù)流中包含前綴 data:…;base64,,先分離 MIME 類型和 Base64 數(shù)據(jù)部分。
如果沒有前綴,假設(shè)默認(rèn) MIME 類型(如 application/octet-stream)。
2、Base64 解碼:
使用 atob 將 Base64 字符串解碼為二進(jìn)制字符串。
將二進(jìn)制字符串轉(zhuǎn)為 Uint8Array。
3、生成 Blob:
將二進(jìn)制數(shù)據(jù)創(chuàng)建為 Blob 對(duì)象,指定類型(如 text/plain)。
4、觸發(fā)下載:
使用 URL.createObjectURL 創(chuàng)建 Blob 對(duì)象的臨時(shí) URL。
動(dòng)態(tài)創(chuàng)建 元素,設(shè)置其 href 屬性為臨時(shí) URL,指定文件名,觸發(fā)點(diǎn)擊事件下載。
5、清理臨時(shí)資源:
下載完成后,移除 元素并釋放臨時(shí) URL。
實(shí)現(xiàn)代碼如下:
function downloadBase64Data(base64Data, fileName) { try { // 檢查 Base64 數(shù)據(jù)是否包含前綴(如 data:...;base64,) let mimeType = ''; let base64String = ''; if (base64Data.includes(',')) { const [metadata, data] = base64Data.split(','); mimeType = metadata.match(/:(.*?);/)[1]; // 提取 MIME 類型 base64String = data; // 僅取 Base64 數(shù)據(jù)部分 } else { // 如果沒有前綴,默認(rèn)為某種 MIME 類型,例如 application/octet-stream mimeType = 'application/octet-stream'; base64String = base64Data; } // Base64 解碼 const binaryString = atob(base64String); // 解碼 Base64 const binaryData = new Uint8Array(binaryString.length); for (let i = 0; i < binaryString.length; i++) { binaryData[i] = binaryString.charCodeAt(i); } // 創(chuàng)建 Blob 對(duì)象 const blob = new Blob([binaryData], { type: mimeType }); // 使用 Blob 創(chuàng)建臨時(shí) URL const url = URL.createObjectURL(blob); // 創(chuàng)建 <a> 元素并觸發(fā)下載 const a = document.createElement('a'); a.href = url; a.download = fileName; document.body.appendChild(a); // 必須將其添加到 DOM 中 a.click(); // 清理 document.body.removeChild(a); URL.revokeObjectURL(url); console.log('文件下載成功'); } catch (error) { console.error('下載失敗:', error.message); } } // 示例用法 const base64Data = 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=='; // 示例 Base64 數(shù)據(jù) const fileName = 'example.txt'; downloadBase64Data(base64Data, fileName);
優(yōu)勢(shì)
無 API 依賴:適合直接處理純 Base64 數(shù)據(jù)流。
兼容性高:支持現(xiàn)代瀏覽器(Chrome、Firefox、Edge)。
注意事項(xiàng)
文件名:確保 fileName 是用戶友好的文件名,并包含擴(kuò)展名。
性能問題:對(duì)于較大的 Base64 數(shù)據(jù),內(nèi)存占用會(huì)較高。
安全性:確保 Base64 數(shù)據(jù)可信,避免處理惡意輸入。
到此這篇關(guān)于JavaScript實(shí)現(xiàn)下載base64數(shù)據(jù)并兼容低版本的文章就介紹到這了,更多相關(guān)JavaScript下載base64數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)基于正則表達(dá)式的輕量提示插件
這篇文章主要介紹了基于正則表達(dá)式的輕量提示插件,兼容性強(qiáng)卻文件輕巧的文本框檢測(cè)插件,推薦給大家,有需要的小伙伴可以參考下。2015-08-08js 動(dòng)態(tài)給元素添加、移除事件的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 動(dòng)態(tài)給元素添加、移除事件的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07node.js使用nodemailer發(fā)送郵件實(shí)例
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下2014-03-03關(guān)于javascript event flow 的一個(gè)bug詳解
描述了firefox,safari 有一個(gè)bug和DOM 3 規(guī)范不一致:在event.currentTarget等于event.target的時(shí)候(即event flow處于target phase時(shí)),會(huì)調(diào)用添加到currentTarget上的useCapture為true的listener2013-09-09js實(shí)現(xiàn)自動(dòng)輪換選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自動(dòng)輪換選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串
可以看到當(dāng)忘記寫option的value時(shí)這些現(xiàn)代瀏覽器都會(huì)盡量返回正確的(客戶端程序員想要的)結(jié)果value,其容錯(cuò)性比IE6/7/8做的更好。2011-04-04js判斷兩個(gè)數(shù)組是否存在相同元素的四種方法
這篇文章主要給大家介紹了關(guān)于js判斷兩個(gè)數(shù)組是否存在相同元素的四種方法,js中是不能直接用==或者===來計(jì)算兩個(gè)數(shù)組是否相等的,那么就需要對(duì)數(shù)組的值進(jìn)行比較,需要的朋友可以參考下2023-07-07JavaScript必看的10道面試題總結(jié)(推薦)
JavaScript 已經(jīng)成為全棧開發(fā)技能的基石,在全棧開發(fā)面試中都會(huì)不可避免地涉及到與 JavaScript 有關(guān)的問題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05