以下代码有两个方法:donwloadFileByUrl 和 donwloadFile 传入两个参数,文件地址 和 文件名
import axios from "axios";// 传统a标签下载文件
export const donwloadFile = async (item) => {const a = document.createElement("a");a.style.display = "none";a.setAttribute('target', '_blank');a.download = item.fileName;a.href = item.filePath;document.body.appendChild(a);a.click();document.body.removeChild(a);
};// 网络请求下载文件
export const donwloadFileByUrl = async (item) => {axios.get(item.filePath, {responseType: 'blob' // 拿到文件的blob数据}).then(async (blob) => {console.log(blob);const url = URL.createObjectURL(blob.data);const a = document.createElement('a');a.style.display = 'none';a.setAttribute('target', '_blank');a.href = url;a.download = item.fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}).catch(error => {// 创建一个临时的a标签来触发下载donwloadFile(item)});
};//使用:
donwloadFileByUrl({filePath:'https://xxxxxx/example.pdf',fileName:'example.pdf'})
推荐用第二个网络请求的方式下载文件,因为第一种方法a标签下载文件(如pdf)的时候会在浏览器打开而不是直接下载文件;并且第二种方法请求错误了会再次尝试执行第一种下载方法(如跨域)