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);
  };
相关推荐
zhensherlock21 小时前
Protocol Launcher 系列:Beorg 高效任务管理的协议支持
前端·javascript·typescript·node.js·自动化·github·js
ppandss121 小时前
JavaWeb从0到1-DAY3.1- Vue(ii)
前端·javascript·vue.js
M ? A21 小时前
Vue 转 React | VuReact编译工具快速入门
前端·javascript·vue.js·后端·react.js·面试·vureact
qq_4275398321 小时前
iframe 嵌入预览 PDF ,禁用右键菜单、打印下载按钮不展示
前端·javascript·vue.js·pdf
yu859395821 小时前
降低OFDM系统PAPR的各种算法及误码率分析
前端·算法
ZC跨境爬虫21 小时前
跟着 MDN 学 HTML day_3:(表单CSS美化实战与盒子模型三大核心属性详解)
前端·javascript·css·html
张风捷特烈21 小时前
状态管理大乱斗#05 | Riverpod 源码评析 (中) - 上层建筑
android·前端·flutter
土豆125021 小时前
Rust 生命周期开发实战:从"编译不过"到"一次过编"的实用指南
前端·rust
candyTong1 天前
一觉醒来,大模型就帮我排查完页面性能问题
前端·javascript·架构