JavaScript實現下載base64數據并兼容低版本

更新時間：2024年12月26日 08:48:28 作者：Code_Geo

這篇文章主要為大家詳細介紹了如何使用JavaScript實現下載base64數據并兼容低版本,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

詳細步驟如下

1、解析 Base64 數據：

如果數據流中包含前綴 data:…;base64,，先分離 MIME 類型和 Base64 數據部分。

如果沒有前綴，假設默認 MIME 類型（如 application/octet-stream）。

2、Base64 解碼：

使用 atob 將 Base64 字符串解碼為二進制字符串。

將二進制字符串轉為 Uint8Array。

3、生成 Blob：

將二進制數據創(chuàng)建為 Blob 對象，指定類型（如 text/plain）。

4、觸發(fā)下載：

使用 URL.createObjectURL 創(chuàng)建 Blob 對象的臨時 URL。

動態(tài)創(chuàng)建元素，設置其 href 屬性為臨時 URL，指定文件名，觸發(fā)點擊事件下載。

5、清理臨時資源：

下載完成后，移除元素并釋放臨時 URL。

實現代碼如下:

function downloadBase64Data(base64Data, fileName) {
  try {
    // 檢查 Base64 數據是否包含前綴（如 data:...;base64,）
    let mimeType = '';
    let base64String = '';

    if (base64Data.includes(',')) {
      const [metadata, data] = base64Data.split(',');
      mimeType = metadata.match(/:(.*?);/)[1]; // 提取 MIME 類型
      base64String = data; // 僅取 Base64 數據部分
    } 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 數據
const fileName = 'example.txt';
downloadBase64Data(base64Data, fileName);

優(yōu)勢

無 API 依賴：適合直接處理純 Base64 數據流。

兼容性高：支持現代瀏覽器（Chrome、Firefox、Edge）。

注意事項

文件名：確保 fileName 是用戶友好的文件名，并包含擴展名。

性能問題：對于較大的 Base64 數據，內存占用會較高。

安全性：確保 Base64 數據可信，避免處理惡意輸入。

到此這篇關于JavaScript實現下載base64數據并兼容低版本的文章就介紹到這了,更多相關JavaScript下載base64數據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: