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);
  };
相关推荐
草青工作室3 分钟前
java-FreeMarker3.4自定义异常处理
java·前端·python
美狐美颜sdk7 分钟前
抖动特效在直播美颜sdk中的实现方式与优化思路
前端·图像处理·人工智能·深度学习·美颜sdk·直播美颜sdk·美颜api
Mr Xu_10 分钟前
Vue3 + Element Plus 实战:App 版本管理后台——动态生成下载二维码与封装文件上传
前端·javascript·vue.js
闻哥14 分钟前
从 AJAX 到浏览器渲染:前端底层原理与性能指标全解析
java·前端·spring boot·ajax·okhttp·面试
比特森林探险记16 分钟前
Vue基础语法与响应式系统详解
前端·javascript·vue.js
m0_6948455724 分钟前
网站账号太多难管理?Enterr 开源自动化工具搭建教程
运维·服务器·前端·开源·自动化·云计算
光影少年26 分钟前
react中redux的connect作用是什么
前端·react.js·前端框架
芋头莎莎36 分钟前
基于MQTT通讯UNIapp程序解析JSON数据
前端·uni-app·json
weixin_436525071 小时前
若依多租户版: 页面新增菜单, 执行菜单SQL
前端·数据库·sql
FITA阿泽要努力1 小时前
Agent Engineer-Day 1 初始智能体与大语言模型基础
java·前端·javascript