前端文件下载多方式集合

基于vue+element UI框架

// @ts-ignore
import axios from "axios";
import { ElMessage } from "element-plus";
import webConfig from "@/config";

class FileDownload {
  /**
   * 文件流下载
   *  @param url string 下载地址
   *  @param params object 请求参数
   *  @param fileName string 文件名
   * @param method
   */
  // eslint-disable-next-line @typescript-eslint/ban-types
  static streamDownLoad(url: string, params: object, fileName: string, method = "GET"): void {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    return axios({
      url: url,
      params,
      data: params,
      method,
      headers: {
        "X-Access-Token": window.lxLocalStorage.getItem("token"),
        token: window.lxLocalStorage.getItem("token"),
      },
      responseType: "blob",
    })
      .then(async (res: { data: any }) => {
        console.log(res);
        // @ts-ignore
        const contentDispositio = res.headers["content-disposition"];
        if (contentDispositio) {
          const f = contentDispositio.match(/filename=.+/gi, "$0");
          if (f && f.length) {
            fileName = window.decodeURI(f[0].replace(/filename=/gi, ""));
          }
        }
        const fileBlob = res.data;
        const fileType = fileBlob.type;
        if (fileType === "application/json") {
          const text = await fileBlob.text();
          const jsonText = JSON.parse(text);
          // @ts-ignore
          ElMessage.error(`文件下载失败：${jsonText?.message}`);
        } else if (fileBlob instanceof Blob) {
          const blob = new Blob([fileBlob]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = fileName;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      })
      .catch((err: Error) => {
        // @ts-ignore
        ElMessage.error(`文件下载失败：${err.message}`);
      });
  }

  /**
   * 直接通过 a 标签下载文件 最好不要用这种方式 缺少一定的安全验证
   */
  static aDownLoad(url: string, fileName: string): void {
    const link = document.createElement("a");
    link.style.display = "none";
    link.href = `${webConfig.fileServer}/file/file/download?url=${url}&fileName=${fileName}`;
    link.download = fileName || "无标题文件";
    link.setAttribute("target", "_blank");
    link.click();
    link.remove();
  }
  /**
   * base64下载
   */
  static base64DownLoad(content: string, fileName: string, suffix: string): void {
    const DOWNLOAD_TYPE_MAP: any = {
      xls: "application/vnd.ms-excel",
      xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      doc: "application/msword",
      docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      pdf: "application/pdf",
    };
    const prefix = "data:" + DOWNLOAD_TYPE_MAP[suffix] + ";base64,";
    const url = prefix + content;
    const name = `${fileName}.${suffix}`;
    const link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", name);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  /**
   * 导出文件
   * @param api
   * @param params
   */
  static exportFile(api: string, params?: any) {
    let api_url = api;
    if (params) {
      api_url = `${api_url}?${Object.keys(params)
        .map(k => k + "=" + encodeURIComponent(params[k] != null ? params[k] : ""))
        .join("&")}`;
    }
    console.log(api_url);
    window.open(api_url);
  }
}

export default FileDownload;

技术交流+V: bloxed