Vue中处理与下载二进制流文件的详细指南

今天本人通过后端请求碰到一串乱码，对此百思不得其解，问了后端大佬才知道这是一个二进制流，是下载需要用的，本小白经研究得出了下载二进制流文件的方法，这边将心得分享给大家。

什么是二进制流文件

二进制文件是一种计算机文件格式，它的数据以二进制形式存储，与文本文件不同。二进制文件可以包含任意类型的数据，如图像、音频、视频、可执行文件、压缩文件等。这些数据在计算机中均以二进制形式表示，并通过特定的格式存储在文件中，以便在需要时能够正确读取和使用。前端请求得到的二进制流文件大概是这样的：

二进制流常见对象

处理二进制流时，JavaScript提供了几种核心对象，包括Blob、ArrayBuffer、File、FileReader和FormData。其中，Blob和ArrayBuffer是最常用的两种。

Blob（BinaryLargeObject）：代表不可变的、类似文件的原始数据的二进制对象。

ArrayBuffer：表示一个通用的、固定长度的原始二进制数据缓冲区。

Vue 3中实现二进制流文件下载

Vue3中下载二进制流文件的一般步骤：

发送请求：使用Axios或Fetch向后端发送请求，并设置responseType为'blob'或'arraybuffer'，以获取二进制数据。

处理响应：将响应的二进制数据转换为Blob对象（如果responseType为'blob'则直接使用，否则需要转换）。

创建下载链接：动态创建一个<a>标签，设置其href属性为Blob对象的URL（通过URL.createObjectURL()生成），并设置download属性为期望的文件名。

触发下载：模拟点击<a>标签，触发浏览器下载文件。

清理资源：下载完成后，移除创建的<a>标签，并释放Blob对象的URL（通过URL.revokeObjectURL()）。

获取二进制流文件

首先，我们需要使用Axios向后端发送请求，并设置响应类型为arraybuffer或blob，以便接收二进制数据。以下是一个获取二进制流文件的函数示例：

// 在Vue组件的methods中定义
async getBinaryFile(url, params, method = 'POST', responseType = 'blob') {
  const config = {
    responseType: responseType,
    method: method.toLowerCase(),
    headers: {
      // 根据需要设置请求头
    },
  };

  if (method.toLowerCase() === 'get') {
    const response = await axios.get(url, { params, ...config });
    this.downloadBinaryFile(response.data, '文件名.扩展名', 'MIME类型');
  } else if (method.toLowerCase() === 'post') {
    const response = await axios.post(url, params, config);
    this.downloadBinaryFile(response.data, '文件名.扩展名', 'MIME类型');
  }
}

下载二进制流文件

获取到二进制数据后，我们需要创建一个Blob对象，并使用一个动态生成的<a>标签来触发下载。以下是一个下载二进制流文件的函数示例：

// 在Vue组件的methods中定义
downloadBinaryFile(binFile, fileName, blobType = 'application/octet-stream') {
  const blobObj = new Blob([binFile], { type: blobType });
  const downloadLink = document.createElement('a');
  const url = window.URL.createObjectURL(blobObj);

  downloadLink.href = url;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();

  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(url);
}

使用示例

在Vue 3的组件模板中，我们可以添加一个按钮来触发文件下载：

<template>
  <div>
    <button @click="getBinaryFile('YOUR_BACKEND_API_ENDPOINT', { id: '' })">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    getBinaryFile,
    downloadBinaryFile,
    // ... 其他methods
  },
  // ... 其他组件选项
};
</script>

确保将'YOUR_BACKEND_API_ENDPOINT'替换为你的后端API的实际地址，并根据需要设置文件名和MIME类型。

注意事项

浏览器的同源策略可能会限制跨域请求。如果前端和后端不在同一个域下，你需要在后端配置CORS（跨域资源共享）来允许前端访问。

不同的二进制文件类型需要不同的MIME类型，确保为downloadBinaryFile函数提供正确的MIME类型，以便浏览器能够正确处理文件。

通过以上步骤，你可以轻松地在Vue 3项目中实现二进制流文件的下载功能。