前端文件下载多方式集合

基于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-typesstatic streamDownLoad(url: string, params: object, fileName: string, method = "GET"): void {// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-ignorereturn 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-ignoreconst 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-ignoreElMessage.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-ignoreElMessage.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;