最近遇到一个问题,接收服务器的文件链接之后进行下载时,往往文件名是哈希值,所以我们要进行重命名,但是设置download会失效,经过资料查找找到了解决方案
注意:html5 新特性a标签download属性只支持谷歌和火狐
一.A标签设置download属性为什么会失效?
1.跨域问题
如果 href
指向的是跨域资源(不同的域名、端口或协议),浏览器会出于安全考虑忽略 download
。
一句话概括:
download 属性只有在同源且直接指向可下载资源时才有效。
二.如何解决?
1.发送新请求,创建a标签触发下载
const downloadA = (fileUrl, fileName) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', fileUrl, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
const res = xhr.response;
const link = document.createElement('a');
link.style.display = 'none';
const url = window.URL.createObjectURL(res);
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
} else {
console.error('下载失败:', xhr.status);
ElMessage.error('下载失败,请稍后重试');
}
};
xhr.onerror = function() {
console.error('下载请求出错');
ElMessage.error('下载请求出错,请检查网络连接');
};
xhr.send();
}
2.后端设置可以跨域下载
Access-Control-Allow-Origin: *
Content-Disposition: attachment; filename="file.pdf"
小知识点:
createObjectURL --API:
createObjectURL
是浏览器提供的一个 API,用于创建一个指向 Blob 或 File 对象的临时 URL。这个 URL 可以被用作图片、视频等资源的源地址,或者用于下载文件。