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);
  };
相关推荐
小二·2 分钟前
Python Web 开发进阶实战:国际化(i18n)与多语言支持 —— Vue I18n + Flask-Babel 全栈解决方案
前端·vue.js·python
全栈前端老曹3 分钟前
【包管理】npm最常见的10大问题故障和解决方案
前端·javascript·rust·npm·node.js·json·最佳实践
weixin_427771618 分钟前
pnpm 改造
前端
岁岁种桃花儿8 分钟前
Spring Boot Maven插件核心配置详解:从打包到部署全流程
前端·firefox·springboot
小二·8 分钟前
Python Web 开发进阶实战:API 安全与 JWT 认证 —— 构建企业级 RESTful 接口
前端·python·安全
摸鱼的春哥9 分钟前
继续AI编排实战:带截图的连麦切片文章生成
前端·javascript·后端
出了名的洗发水12 分钟前
科技感404页面
前端·科技·html
咔咔一顿操作14 分钟前
nvm安装Node后node -v正常,npm -v提示“无法加载文件”问题解决
前端·npm·node.js
Sapphire~14 分钟前
【前端基础】03- .stop VS .prevent
前端
zsd_3115 分钟前
npm指定本地缓存、安装包、仓库路径
前端·缓存·npm·node.js·私服·安装包·本地