前端文件流下载 Vue

前端文件下载通用方法，需求描述：后端返回文件流，前端获取文件流下载，并且文件名称在后端返回的header中获取，并且解决文件名中午乱码问题

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("下载失败");
      }
    }
  })
};