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);
  };
相关推荐
sir.山1 天前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
李剑一1 天前
华为新上Pura X View阔直板手机,特殊屏幕比例设备下,前端应该怎么去适配更完美?送你一套完整工具代码
前端
01_ice1 天前
html个人简历展示
前端·html
程序员爱钓鱼1 天前
Rust where详解:让泛型与Trait约束更加清晰
前端·后端·rust
zzzzzz3101 天前
react-bits 为什么会吸引前端开发者:别把动效当装饰,先把它当成页面能力
前端·react.js·动效
风月说与山鬼1 天前
二、React入口文件(main.jsx)
前端·react.js
东风破_1 天前
Docker 基础:为什么需要容器?
前端·后端·nginx
东风破_1 天前
Docker 实战:使用 Nginx 作为容器入口代理 Node 服务
前端·后端·nginx
你别说话了1 天前
Vue项目解决跨域
前端·javascript·vue.js
唐青枫1 天前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript