1. 文件为链接的时候
网上大多数是叫你使用a链接,初学者很多时候很懵,点击下载的时候直接就打开文件的链接了,根本没办法下载
a链接没错,通常需要处理一下,直接上代码
const a_link = document.createElement("a"); // 生成一个a链接
fetch(link) // 括号里是文件链接
.then((res) => res.blob())
.then((blob) => {
// 将链接地址字符内容转变成blob地址
a_link.href = URL.createObjectURL(blob);
console.log(a_link.href);
a_link.download = name; //下载的文件的名字
document.body.appendChild(a_link);
a_link.click();
});
注意:这样下载的文件要求文件链接遵循同源策略,也就是说,文件路径如果跨域会下载失败
2.文件不为链接,通过接口传参
axios
.get(`/common/File/Download?id=${id}`, {
responseType: "blob",
})
.then((res) => {
let url = URL.createObjectURL(res.data);
var a = document.createElement("a");
a.href = url; // 给a标签赋上下载地址
a.download = `${name}`;
a.style.display = "none"; // 让a标签不显示
a.click(); // a标签自点击
URL.revokeObjectURL(a.href);
})
.catch((_) => {});