oss上的文件是可以直接通过动态创建a标签来下载的,但是下载的文件名是oss给的,在不转成blob类型的前提下更改a.download是无效的
先把文件转成文件流的形式,再通过动态创建a标签,更改a.download属性来更改文件名
1.将文件以流文件的形式下载下来
function getBlob(url) {
// url:是文件在oss上的地址
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";// 请求类型是blob类型
xhr.crossOrigin = "*"; // 解决跨域问题
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}
2.下载文件并重新命名
function saveAs(blob, filename) {
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);
}
}
3. 使用
getBlob(url).then(res =>{
//url:文件在oss上的地址
saveAs(res,filename) // filename:文件名,可自定义
})