vue3 下载文件方式（包括通过url下载文件并修改文件名称，和文件流下载方式）

一、通过url下载文件并修改文件名称

1.封装downloadFile.ts

/** 下载文件* @param url 下载地址* @param fileName 下载后的文件名* 备注：下载的文件地址要和当前网站域名保持一直，不然会报错*/
export const downloadInvoke = (url: string, fileName: string) => {getBlob(url).then((blob) => {saveAs(blob, fileName);});
}export const getBlob = (url: string) => {return new Promise((resolve) => {const xhr = new XMLHttpRequest();xhr.open("GET", url, true);xhr.responseType = "blob";xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);}};xhr.send();});
};export const saveAs = (blob: any, filename: string) => {if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, filename); //允许用户在客户端上保存文件} else {const link = document.createElement("a");const body = document.querySelector("body");link.href = window.URL.createObjectURL(blob);link.download = filename;link.style.display = "none";body.appendChild(link);link.click();body.removeChild(link);window.URL.revokeObjectURL(link.href);}
};

2.引入

import { downloadInvoke } from "@/utils/index";downloadInvoke(url, "文件名")

二、文件流下载方式

1.封装downloadFile.ts

// 文件流下载
// 下载文件的接口 fileName = 'xxxx.xls'
/** 文件流 下载文件* @param res 文件流* @param fileName 下载后的文件名* 备注：接口里面记得添加 responseType: "blob"*/
export const downData = (res: any, fileName: string) => {if (!res) {return}// 无法导出时，报错的问题的处理if (res.type == "application/json") {const reader = new FileReader();reader.readAsText(res, "utf-8");reader.onload = function () {const msg = JSON.parse(reader.result as string);ElMessage.error(msg);}return}let url = window.URL.createObjectURL(new Blob([res]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link)window.URL.revokeObjectURL(url)
}

2.引入

import { downData } from "@/utils/index";downData(res, "文件名.xls")