Data URL vs Blob URL

網頁應用常見的資源網址除了 http URL 外,
還有 Data URL 及 Blob URL

這兩種類型的網址，也很常用在資源下載及顯示
內文將介紹這兩種 URL 的基本使用方法

Data URL (資料網址)

Data URL 可以使資源以文本格式直接鑲嵌在 HTML 中使用
如常見的圖片以 base64 置入於 img 標籤的 src 內
也可以將其放入 a 標籤的 href 內供使用者下載

Data URL 的基本編碼格式如下

1	data:[media type][;編碼格式],編碼

圖片範例：

1	data:image/png;base64,[base64代碼]

純文字範例：

1	data:text/plain;charset=utf-8,[字串符]

圖片資源加載範例:

1	<img src="data:image/png;base64,[base64代碼]" alt="圖片描述">

圖片資源下載範例:

1	<a href="data:image/png;base64,[base64代碼]" download="檔案名稱">

Blob URL 可以生成一個暫時的網址
並將其資源暫放在瀏覽器的記憶體中

創建 Blob URL 範例:

1
2
3

const string = 'Hello Blob URL';
const file = new Blob([string], {type: text/plain});
const BlobURL = URL.createObjectURL(file); // 這個就是Blob URL

使用 Blob URL 下載檔案的範例：

const link = document.createElement('a');
link.href = BlobURL;
link.download = '檔案名稱';
link.click();

清除下載連結及釋放記憶體

1 2	link.href = ""; URL.revokeObjectURL(BlobURL);