下載首先想到的就是a標簽的download的屬性,download是html5新出現的屬性
<a href="/images/mimage.jpg" download="下載">
//href 是指向下載的超鏈接
//download 對應的是下載的文件名
download支持的瀏覽器及版本
download僅支持同源策略,如果非同源的話,download會失效 且直接跳轉到相對應href的界面。
如果是非同源 使用以下方法:
let url ="https://baidu.com";
let name ="百度";
const downloadRes = async () => {
let response = await fetch(url); // 內容轉變成blob地址
let blob = await response.blob(); // 創建隱藏的可下載鏈接
let objectUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = objectUrl;
a.download = name;
a.click()
a.remove();
}
downloadRes();
如果是文件流形式的 使用以下方法:
//首先請求接口 返回的數據為res
if (window.navigator.msSaveOrOpenBlob) {
// 兼容ie11
var blobObject = new Blob([res.result]);
window.navigator.msSaveOrOpenBlob(blobObject, name);
} else {
let url = URL.createObjectURL(new Blob([res]));
let a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = name;
a.target = "_blank";
a.click();
a.remove();
}
附帶一個關於其他小伙伴寫的關於下載的鏈接:https://blog.csdn.net/qq_43471802/article/details/103436595