前端文件下载多方式集合

基于vue+element UI框架

javascript 复制代码
// @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

相关推荐
金梦人生4 分钟前
Css性能优化
前端·css
Holin_浩霖5 分钟前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖5 分钟前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇5 分钟前
CSS属性继承与特殊值
前端·css
kevlin_coder9 分钟前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生10 分钟前
JS 性能优化
前端·javascript
我有一棵树17 分钟前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊19 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
用户8772447539624 分钟前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱30 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端