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);
  };
相关推荐
weixin_443353314 分钟前
小红书帖子评论的nodejs爬虫脚本
前端·爬虫
yzzzzzzzzzzzzzzzzz6 分钟前
HTML 常用标签介绍
前端·html
Wcy30765190668 分钟前
web前端第二次作业
前端·javascript·css
北京_宏哥9 分钟前
Python零基础从入门到精通详细教程11 - python数据类型之数字(Number)-浮点型(float)详解
前端·python·面试
waterHBO11 分钟前
css 模拟一个动画效果,消息堆叠。
前端·css
前端加油站27 分钟前
在 cursor 成为流行的开发方式后,作为普通开发我们能做什么
前端
Cache技术分享35 分钟前
163. Java Lambda 表达式 - Function 的链式组合
前端·后端
Zestia1 小时前
页面点击跳转源代码?——element-jumper插件实现
前端·javascript
前端小白19951 小时前
面试取经:工程化篇-webpack性能优化之优化loader性能
前端·面试·前端工程化
PineappleCoder1 小时前
大小写 + 标点全搞定!JS 如何精准统计单词频率?
前端·javascript·算法