2025-02-27-Blob 是 **Binary Large Object** 的縮寫

發表於 閱讀次數：
2025-02-27-Blob 是 **Binary Large Object** 的縮寫

2025-02-27-Blob 是 Binary Large Object 的縮寫

當你寫下這行：

1
const blob = new Blob([jsonString], { type: 'application/json' })

它的作用是：
🔧 將 JavaScript 文字（JSON 字串）打包成一個可以下載或處理的檔案物件。

✅ 詳細解釋：

🔸 Blob 是什麼？

Blob 是 Binary Large Object 的縮寫，它是 JavaScript 中用來表示 不可變的原始資料（二進位、大塊資料） 的一種物件。

它可以包含：

  • 純文字
  • 圖片
  • JSON
  • 影片
  • 任意檔案內容

🔹 語法解析：

1
new Blob([內容], { type: 'MIME 類型' })
部分 說明
[jsonString] 要寫進檔案的內容（這裡是你的 JSON 字串）
{ type: 'application/json' } 檔案的 MIME 類型，讓系統知道這是 JSON 格式

💡 這樣做是為了「模擬」一個下載用的 .json 檔案。

🧪 範例：

假設你有個 JSON 字串：

1
2
const jsonString = '{"name": "Lily", "age": 25}'
const blob = new Blob([jsonString], { type: 'application/json' })

這個 blob 物件裡面就會包含你的 JSON 檔案內容了。

📥 接下來你可以用這個 Blob：

  1. 建立下載連結（<a> 標籤）
  2. 顯示在頁面上供人下載
  3. 傳送給伺服器上傳等

👇 搭配下載功能就是：

1
2
3
4
5
6
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'data.json'
a.click()
URL.revokeObjectURL(url)

這段程式碼的功能是：
✅ 把你用 JavaScript 產生的資料，透過瀏覽器下載成一個檔案。

🔍 詳細語法解析

1
const url = URL.createObjectURL(blob)

🧠 意思：

把 blob（檔案資料）轉成一個 暫時性的 URL，可以讓你用 <a> 標籤去連結、下載或預覽。

🧾 舉例：

產生像這樣的網址：

1
blob:null/1a2b3c4d-5678-90ef-1234-567890abcdef
1
const a = document.createElement('a')

🧠 意思：

用 JavaScript 建立一個 <a> 超連結元素（不會加到畫面上）。

1
a.href = url

🧠 意思：

把這個連結元素的 href 屬性設為上面建立的 blob URL，也就是指向我們要下載的檔案內容。

1
a.download = 'data.json'

🧠 意思：

這是 HTML5 的 download 屬性。
📂 它會告訴瀏覽器：「下載這個檔案，而且檔名叫做 data.json」。

1
a.click()

🧠 意思：

模擬使用者「點擊」這個 <a> 標籤。
🚀 這一行會觸發瀏覽器開始「下載檔案」的動作。

1
URL.revokeObjectURL(url)

🧠 意思：

釋放這個 blob URL 的記憶體空間，讓瀏覽器清理不再使用的資源（⚠️ 非常重要的清理動作）。

📌 總結流程圖（點一下 → 建立 URL → 模擬下載 → 清理）：

1
1. Blob檔案  →  2. 建立URL  →  3. 建立<a>標籤 → 4. 模擬點擊 → 5. 清理資源

✅ 實際應用範例

你可以用這整段程式碼，讓使用者下載任何資料，例如：

1
2
3
4
5
6
7
8
9
const jsonString = JSON.stringify({ name: "Lily", age: 25 }, null, 2)
const blob = new Blob([jsonString], { type: 'application/json' })

const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'my_data.json'
a.click()
URL.revokeObjectURL(url)

這會自動下載一個檔案 my_data.json，內容是：

1
2
3
4
{
  "name": "Lily",
  "age": 25
}