使⽤h5a标签href=urldownload下载踩过的坑
⽤户点击下载多媒体⽂件(图⽚/视频等),最简单的⽅式:
<a href='url' download="">下载</a>
如果url指向同源资源,是正常的。
如果url指向第三⽅资源,download会失效,表现和不使⽤download时⼀致——浏览器能打开的⽂件,浏览器会直接打开,不能打开的⽂件,会直接下载。浏览器打开的⽂件,可以⼿动下载。
解决⽅案⼀:将⽂件打包为.zip/.rar等浏览器不能打开的⽂件下载。
解决⽅案⼆:通过后端转发,后端请求第三⽅资源,返回给前端,前端使⽤file-saver等⼯具保存⽂件。
如果url指向的第三⽅资源配置了CORS,download依然⽆效,但可以通过xhr请求获取⽂件,然后下载到本地。
/**
* ⽤FileSave保存⽂件
* @param url
*/
export function downloadUrlFile(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
if (xhr.status === 200) {
// 获取图⽚blob数据并保存
sponse, 'abc.jpg');
}
};
xhr.send();
}
/**
* URL⽅式保存⽂件到本地
href标签怎么用* @param name ⽂件名
* @param data ⽂件的数据
*/
function save(name, data) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = ateElementNS('/1999/xhtml', 'a')
save_link.href = ateObjectURL(export_blob);
save_link.download = name;
_fakeClick(save_link);
}
浏览器已经限制死跨域下载多媒体⽂件的各种⽅式。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论