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);
  };
相关推荐
骐骥120 分钟前
鸿蒙开发使用DevTools工具调试ArkWeb组件中的前端页面
前端·harmonyos·调试·arkweb·纯鸿蒙
WHOVENLY7 小时前
【javaScript】- 笔试题合集(长期更新,建议收藏,目前已更新至31题)
开发语言·前端·javascript
指尖跳动的光8 小时前
将多次提交合并成一次提交
前端·javascript
程序员码歌8 小时前
短思考第263天,每天复盘10分钟,胜过盲目努力一整年
android·前端·后端
oden8 小时前
1 小时速通!手把手教你从零搭建 Astro 博客并上线
前端
若梦plus8 小时前
JS之类型化数组
前端·javascript
若梦plus8 小时前
Canvas 深入解析:从基础到实战
前端·javascript
若梦plus8 小时前
Canvas渲染原理与浏览器图形管线
前端·javascript
C_心欲无痕8 小时前
vue3 - 依赖注入(provide/inject)组件跨层级通信的优雅方案
前端·javascript·vue.js