后端返回blob文件流

### 处理后端返回的Blob文件流

#### 接收Blob文件流
为了处理来自服务器的Blob响应，可以使用`axios`库发送请求，并设置响应类型为`blob`。这允许客户端正确解析二进制数据而不是尝试将其作为JSON或其他文本格式读取。

import axios from 'axios';

const downloadFile = async (url, fileName) => {
  try {
    const response = await axios.get(url, {
      responseType: 'blob' // 设置响应的数据类型为blob
    });
    
    saveAs(response.data, fileName); // 调用函数来保存文件
    
  } catch (error) {
    console.error('There was an error downloading the file!', error);
  }
};

此代码片段展示了如何配置HTTP GET请求以获取Blob类型的资源[^1]。

#### 创建Blob对象并指定MIME类型
一旦收到Blob形式的内容，则可以根据实际情况创建一个新的Blob实例，并为其分配合适的媒体类型（即MIME类型）。这对于确保浏览器能够识别所下载文件的实际格式至关重要。

// 假设response.data是从API获得的原始Blob数据
const blob = new Blob([response.data], { type: 'application/pdf' }); // 如果是PDF文档则如此设定

这里假设正在处理的是一个PDF文件；如果是其他类型的文件，则应相应调整MIME字符串[^3]。

#### 自动触发文件下载行为
为了让用户无需手动操作就能立即开始下载过程，可以通过JavaScript动态生成<a>标签并将href属性指向由URL.createObjectURL()方法创建的对象URL。之后模拟点击事件即可启动下载流程。

function saveAs(blobData, filename){
  let link=document.createElement("a");
  link.href=URL.createObjectURL(blobData);
  link.download=filename;
  
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href); // 清除内存中的临时URL
}

这段脚本实现了将给定的Blob数据转换成可被浏览器理解的形式，并促使它作为一个附件被下载下来[^2]。

#### 展示预览功能（针对特定文件）
对于某些支持在线查看的文件类型（如图片、视频或Office文档），可以在不实际下载的情况下提供即时预览选项。此时只需简单地把Blob对象赋值给<img>/<video>/iframe等HTML元素的src属性即可完成加载显示工作。

<!-- HTML部分 -->
<template>
  <div v-if="previewUrl">
    <!-- 根据不同文件类型选择适合的展示组件 -->
    <img :src="previewUrl" alt="" />
    <!-- 或者 -->
    <embed :src="previewUrl" width="80%" height="600px"/>
  </div>
</template>

<script setup lang="ts">
let previewUrl;

async function fetchAndPreview(url:string){
  const response = await axios.get(url,{
    responseType:'blob'
  });

  previewUrl = URL.createObjectURL(new Blob([response.data]));
}

onMounted(() => {
  fetchAndPreview('/api/get-file');
});
</script>

上述例子说明了如果想要在页面上直接呈现接收到的文件内容而不必先存储到用户的设备里该怎么做[^4]。