以下代码有两个方法: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)的时候会在浏览器打开而不是直接下载文件;并且第二种方法请求错误了会再次尝试执行第一种下载方法(如跨域)