Vue利用Blob下载原生二进制数组文件

下面是 Vue 利用 Blob 下载原生二进制数组文件的完整攻略。

什么是 Blob

Blob 接口表示一个不可变、原始数据的类文件对象。Blob 可以表示文本、二进制数据或其他类型的数据，但是和 File 不同，Blob 并不包括文件名和各种元数据，即只是二进制数据的一种容器。

实现步骤

下载二进制数组文件的步骤如下：

将二进制数组文件转换成 Blob，可以使用 Blob 的构造器、ArrayBuffer 实例的 slice 方法或者 BlobBuilder 构造器来创建 Blob；
使用 URL.createObjectURL() 函数生成一个 URL；
使用 a 标签模拟链接，点击下载。

代码示例

以下我们将展示两个实例，展示如何利用 Vue 完成文件的下载。

实例一

该实例将展示如何使用 Axios 请求远程文件，并通过 Blob 实现文件的下载。假设后端 API 提供 /api/download 给出一个二进制数组，我们来实现如下代码：

<template>
  <div class="container">
    <button @click="download">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'DownloadExample',
  methods: {
    download() {
      axios({
        url: '/api/download',
        method: 'GET',
        responseType: 'blob'
      }).then(response => {
        const blob = new Blob([response.data])
        const a = document.createElement('a')
        const downloadUrl = URL.createObjectURL(blob)
        a.href = downloadUrl
        a.download = 'test.xlsx'
        a.click()
        URL.revokeObjectURL(downloadUrl)
      })
    }
  }
}
</script>

上面的代码使用了 Axios 进行请求，获取到 Blob 数据后，将其转换成二进制文件，并通过模拟链接的方式触发下载。

实例二

该实例将展示如何直接使用二进制数组转换成 Blob。我们假设有一个十个数的二进制数组，我们先将该数组转换成 Blob，再通过链接模拟下载。

<template>
  <div class="container">
    <button @click="download">下载文件</button>
  </div>
</template>

<script>
export default {
  name: 'DownloadExample2',
  methods: {
    download() {
      const bytes = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
      const blob = new Blob([bytes], { type: 'application/octet-stream' })
      const a = document.createElement('a')
      const downloadUrl = URL.createObjectURL(blob)
      a.href = downloadUrl
      a.download = 'test.bin'
      a.click()
      URL.revokeObjectURL(downloadUrl)
    }
  }
}
</script>

上面的代码中，我们直接将二进制数组转换成 Uint8Array，并且指定 MIME 类型为 application/octet-stream。然后再像之前一样模拟链接并触发下载。