JavaScript實現(xiàn)下載base64數(shù)據(jù)并兼容低版本
詳細步驟如下
1、解析 Base64 數(shù)據(jù):
如果數(shù)據(jù)流中包含前綴 data:…;base64,,先分離 MIME 類型和 Base64 數(shù)據(jù)部分。
如果沒有前綴,假設(shè)默認 MIME 類型(如 application/octet-stream)。
2、Base64 解碼:
使用 atob 將 Base64 字符串解碼為二進制字符串。
將二進制字符串轉(zhuǎn)為 Uint8Array。
3、生成 Blob:
將二進制數(shù)據(jù)創(chuàng)建為 Blob 對象,指定類型(如 text/plain)。
4、觸發(fā)下載:
使用 URL.createObjectURL 創(chuàng)建 Blob 對象的臨時 URL。
動態(tài)創(chuàng)建 元素,設(shè)置其 href 屬性為臨時 URL,指定文件名,觸發(fā)點擊事件下載。
5、清理臨時資源:
下載完成后,移除 元素并釋放臨時 URL。
實現(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 {
// 如果沒有前綴,默認為某種 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 對象
const blob = new Blob([binaryData], { type: mimeType });
// 使用 Blob 創(chuàng)建臨時 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)勢
無 API 依賴:適合直接處理純 Base64 數(shù)據(jù)流。
兼容性高:支持現(xiàn)代瀏覽器(Chrome、Firefox、Edge)。
注意事項
文件名:確保 fileName 是用戶友好的文件名,并包含擴展名。
性能問題:對于較大的 Base64 數(shù)據(jù),內(nèi)存占用會較高。
安全性:確保 Base64 數(shù)據(jù)可信,避免處理惡意輸入。
到此這篇關(guān)于JavaScript實現(xiàn)下載base64數(shù)據(jù)并兼容低版本的文章就介紹到這了,更多相關(guān)JavaScript下載base64數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript異步回調(diào)總是亂序執(zhí)行
在JavaScript開發(fā)中,異步編程是處理非阻塞操作的核心機制,然而,許多開發(fā)者常常會遇到一個令人困惑的問題:為什么異步回調(diào)的執(zhí)行順序與預期不符?下面就來詳細的介紹一下并提供解決方案2026-05-05
js中append和appendChild這兩者之間的一些區(qū)別詳解
這篇文章主要介紹了js中append和appendChild這兩者之間的一些區(qū)別,JavaScript中的append()和appendChild()都可以用于添加子節(jié)點,但它們在語法、參數(shù)類型、兼容性和返回值上存在差異,需要的朋友可以參考下2025-05-05
Three.js中如何使用CSS3DRenderer和CSS3DSprite實現(xiàn)模型標簽文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以輕松地實現(xiàn)模型標簽文字的效果,為場景中的模型提供更直觀的信息展示,本文將介紹如何使用這兩個工具來實現(xiàn)模型標簽文字,并提供相應的代碼示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
js 將input框中的輸入自動轉(zhuǎn)化成半角大寫(稅號輸入框)
本文主要介紹了稅號輸入框:將input框中的輸入自動轉(zhuǎn)化成半角大寫的方法,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02
JS數(shù)據(jù)去重的7種實用方法總結(jié)(附完整代碼與原理)
在JavaScript中數(shù)據(jù)去重是一個常見的操作,特別是在處理數(shù)組時,這篇文章主要介紹了JS數(shù)據(jù)去重的7種實用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-11-11

