reac 后端接口返回二进制文件流前端导出文件

axios配置

复制代码
在你的请求中加入
responseType:'blob'

导出函数

复制代码
export interface DownloadFileOptions {
    filename: string; //文件名称
    
  }
  
  /**
   * 下载二进制文件流
   * @param data - 二进制数据
   * @param options - 下载配置
   */
  export const downloadBinaryFile1 = (
    data: any,  // 这里使用 any 是因为后端返回的数据类型可能不一致
    options: DownloadFileOptions
  ): void => {
    const sset=new Blob([data])
    const url = window.URL.createObjectURL(sset);
    const filename=options.filename
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      
      // 触发下载
      document.body.appendChild(link);
      link.click();
      // 清理并移除元素和创建的URL
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
  };
相关推荐
言乐61 分钟前
JavaScript概括前端原理
开发语言·前端·javascript·python·ecmascript
回眸&啤酒鸭27 分钟前
DeepSeek V4.1 Flash 批量处理实战指南
服务器·前端·javascript
用户33740969242628 分钟前
2026-09-27-Qwen-Image-2.1-1660Ti本地部署实战
前端
BIM云平台开发30 分钟前
DAZ里,如何保存现在姿势,如果调错了,可以重新导回
linux·服务器·前端·daz基础教程
传人31 分钟前
网页文字滚动效果如何做
前端·javascript·jquery
福兮说34 分钟前
前后端算的 MD5、SHA-256 对不上?编码、换行、BOM、HMAC、JSON 顺序,八个原因逐个实测
前端·javascript·node.js·json·哈希算法
一木 之林35 分钟前
DeepSeek Agent 开发
java·前端·人工智能
王霸天1 小时前
Three.js 模型体积优化:Draco/Meshopt 压缩与 DRACOLoader 配置的 4 个步骤
java·前端·javascript
AAA程序技术1 小时前
用户点击按钮时,发生了什么
前端
花旗蜕变1 小时前
前端转 NestJS 全栈实践:从表单页面到微信业务系统
前端·typescript·nestjs