react项目中下载流文件的方法

神也是人哦

已于 2023-09-15 23:03:24 修改

阅读量4k

点赞数 3

分类专栏： react专栏文章标签： react.js 前端

于 2022-11-11 10:54:15 首次发布

本文链接：https://blog.csdn.net/qq_47801638/article/details/127795709

版权

react专栏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端通过axios从服务端获取以流形式的文件，如.xlsx或.xls，然后利用Blob对象将其转换为期望格式，并实现文件下载。重点展示了下载模板接口的实现和一个自定义的downloadFile辅助函数的使用示例。

摘要由CSDN通过智能技术生成

使用场景：服务端返回文件流格式的文件，前端需要把流文件通过Blob转换成我们想要下载的格式。比如以.xlsx，.xls结尾的格式文件。

请求接口：

/**
 * @description  下载流文件的接口
 * @request      通过拦截器封装的axios请求，直接使用axios也行
 * @respinseType 下载流文件时必须要配置的请求头
 */
export const downloadTemplate = () => {
  return request.get(
    `/bottle/activity/user-wish/download-template`,  
    {},
    {
      responseType: 'blob', //必须要配置blob
    },
  );
};

封装utils方法：在src目录下创建utils文件夹，在文件夹中创建downloadFile文件

//引入时间格式化插件
import moment from 'moment';

/**
 * @description 使用时必须于请求头加上responseType: 'blob'，慎用，慎用！
 * @stream  下载流（格式）
 * @filename  下载文件名称
 * @suffix  下载文件后缀，例如".xlsx"
 * @stream: any  等参数格式是对参数类型做一下限制
 */

function downloadFile(
  stream: any,                         
  filename: string = moment(new Date()).format('YYYYMMDD'),  //不传值默认以当前时间为文件名
  suffix: string,
) {
  //通过new Blob和文件格式生成blob对象
  const blob = new Blob([stream]);
  const objectURL = URL.createObjectURL(blob);
  let link = document.createElement('a');
  //下载的文件名
  link.download = `${filename}${suffix}`; 
  link.href = objectURL;
  // @ts-ignore 判断浏览器的方法
  if (!!window.ActiveXObject || 'ActiveXObject' in window) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    link.click();
  }
  URL.revokeObjectURL(objectURL);
  link = null;
}

export default downloadFile;

点击下载文件按钮：

//引入utils定义的downloadFile方法
import { downloadFile } from '@drift-bottle/utils';

//引入下载文件的接口
import {downloadTemplate} from '@drift-bottle/services/api/index';

//下载文件方法
<Button
   onClick={() => {
       downloadTemplate().then((res) => {
        downloadFile(res, '文件名称', '.xlsx');  //downloadFile三个参数
     });
   }}
>
 下载文件
</Button>