使用 Blob 儲存檔案 | 點燈坊

若要儲存檔案到本地，必須使用 Blob 搭配一些技巧才能達成。

Version

Vue 3.3

Blob

<template>
  <textarea v-model="message"></textarea>
  <button @click="onSave">Save to File</button>
</template>

<script setup>
import { ref } from 'vue'

let message = ref('')

let onSave = () => {
  const fileName = 'sample.txt'

  let blob = new Blob([message.value], { type: 'text/plain' })

  let link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = fileName
  link.click()

  URL.revokeObjectURL(link.href)
}
</script>

Line 14

let blob = new Blob([message.value], { type: 'text/plain' })

• 建立 Blob
• 第一個參數需以 Array 形式傳入
• 第二個參數指定要儲存的格式

Line 16

let link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = fileName
link.click()

• 建立一個臨時的 link 並指定 Blob
• 按下去開始下載

Line 21

URL.revokeObjectURL(link.href)

• 移除剛剛臨時建立的 link

Conclusion

• Web API 並沒有提供簡單的 function 可直接下載檔案，需使用 Blob 並建立一個臨時的 link 才能達成