vue3 下载blob

以下是在Vue3中下载blob的代码示例：

<template>
  <div>
    <button @click="downloadBlob">下载Blob</button>
  </div>
</template>

<script>
export default {
  methods: {
    async downloadBlob() {
      const response = await fetch('your_api_url', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        },
        responseType: 'blob' // 设置响应类型为blob
      })
      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', 'file_name') // 设置下载文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

需要注意的是，在后端接口返回的blob文件流中，需要设置流的编码为utf-8，并在下载的api里加上responseType: "blob"，以防止出现文件乱码。