获取后端返回的文件流 前端进行文件下载
创始人
2024-11-12 22:38:21

获取后端返回的文件流 前端进行文件下载

1. 在 utils 文件夹下创建 downloadFile.ts

import axios from "axios";  interface Params {   url: string;   method: string;   data: any; }  export const downLoadFileBlob = (params: Params) => {   return axios({     url: params.url, //下载地址     method: params.method, //请求方式     responseType: "blob", //返回类型     data: params.data, //请求参数   }); }; 

2. 使用

// 导入请求方法 import { downLoadFileBlob } from "@/utils/downloadFile";  //文件流请求方法 const downLoadFileFun = () => {   const data = {     dateType: 2,     startTime: "2024-07-01 00:00:00",     endTime: "2024-07-31 10:15:21",   };   downLoadFileBlob({     url: "/api/v1/report/export/excel",     method: "post",     data: data,   }).then((res)=>{     if(res.status === 200){       const debug = res.data;       if(debug){         const elink = document.createElement("a");          //获取后端返回的文件名 一般在 Content-Disposition 上         const contentDisposition: string = res.headers.get(           "Content-Disposition"         );          //获取文件名 应该是中午乱码的,需要解码一下         const filename: string = contentDisposition.split("filename=")[1];         // 解码一下文件名         const tempName = decodeURIComponent(filename)           elink.download = tempName;         elink.style.display = "none";         const blob = new Blob([debug], { type: "application/x-msdownload" });         elink.href = URL.createObjectURL(blob);         document.body.appendChild(elink);         elink.click();         document.body.removeChild(elink);       }else{         console.log("下载失败");       }     }   }) }; 

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...