前端如何接收后端返回的二进制文件流-实现文件下载功能

天天想吃小孩

于 2025-06-20 11:45:36 发布

阅读量386

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/qq_27363761/article/details/148788793

在前端开发中，有时需要从后端获取文件流，并将其下载到本地。本文介绍如何在前端实现此功能的不同的实现方法，并分析其优缺点

优点
支持传递Token进行身份验证，安全性较高
支持POST请求，可以将参数放在请求体中，避免URL长度限制及参数暴露
缺点
实现相对复杂，需要手动创建和管理Blob对象及下载链接


import axios from 'axios';
import { getToken } from '@/utils/auth'

handleExport() {

  // 接口调用获取文件
  axios({
    method: 'get',
    responseType: 'blob', // 指定响应类型为blob
    url: this.GLOBAL.baseURL + '/api/v1/business/user/export?sid='+sid,
    headers: { 'Authorization': localStorage.getItem("token") } // 传递token进行身份验证
  }).then(res => {
  //decodeURIComponent(res.headers[“download-filename”]  文件名称
          this.downloadBinaryFile(res.data, decodeURIComponent(res.headers[“download-filename”]))
  }).catch(error => {
    console.error('下载失败', error);
  });
},
    
/**
 * 将二进制文件下载到本地，保存为excel文件
 * @param {*} binFile 二进制文件流
 * @param {*} fileName 下载后的文件名
 * @param {*} blobType 文件格式，默认为 "application/vnd.ms-excel"
 */
downloadBinaryFile(binFile, fileName, blobType = "application/vnd.ms-excel") {
  // 创建 Blob 对象，包含二进制文件流和文件类型
      const blobObj = new Blob([binFile], { type: blobType });

      // 创建下载链接元素
      const downloadLink = document.createElement("a");

      // 处理不同浏览器的 URL 兼容性
      let url = window.URL || window.webkitURL;
      url = url.createObjectURL(blobObj); // 创建文件 URL

      // 设置下载链接属性
      downloadLink.href = url;
      downloadLink.download = fileName;

      // 将下载链接添加到文档中并触发点击事件
      document.body.appendChild(downloadLink);
      downloadLink.click();

      // 移除下载链接并释放 URL 对象
      document.body.removeChild(downloadLink);
      window.URL.revokeObjectURL(url);
}