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

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

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("下载失败");
      }
    }
  })
};
相关推荐
tianchang1 小时前
JS 排序神器 sort 的正确打开方式
前端·javascript·算法
做你的猫2 小时前
深入剖析:基于Vue 3与Three.js的3D知识图谱实现与优化
前端·javascript·vue.js
做你的猫2 小时前
深入剖析:基于Vue 3的高性能AI聊天组件设计与实现
前端·javascript·vue.js
dreams_dream3 小时前
vue2实现背景颜色渐变
前端·javascript·css
中微子3 小时前
🏆 ES6 异步编程挑战营:从入门到........
javascript
月弦笙音4 小时前
【XSS】后端服务已经加了放xss攻击,前端还需要加么?
前端·javascript·xss
code_Bo4 小时前
基于vueflow实现动态添加标记的装置图
前端·javascript·vue.js
CodeTransfer5 小时前
css中animation与js的绑定原来还能这样玩。。。
前端·javascript
言之。6 小时前
Web技术构建桌面应用-Tauri框架和Electron框架
前端·javascript·electron
萌萌哒草头将军7 小时前
Node.js v24.7.0 新功能预览 🚀🚀🚀
前端·javascript·node.js