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

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

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

js 复制代码
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. 使用

js 复制代码
// 导入请求方法
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("下载失败");
      }
    }
  })
};
相关推荐
JuneXcy6 分钟前
11.Layout-Pinia优化重复请求
前端·javascript·css
天下无贼!17 分钟前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
PineappleCoder1 小时前
JS 作用域链拆解:变量查找的 “俄罗斯套娃” 规则
前端·javascript·面试
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
533_1 小时前
[echarts] 更新数据
前端·javascript·echarts
讨厌吃蛋黄酥1 小时前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
zzywxc7872 小时前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
_Kayo_8 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
咔咔一顿操作10 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3