近期碰到一个需求,浏览器下载视频、音频等附件,原生组件video、audio倒是支持下载,但是别的类型不行,而且无法通过下载按钮进行,常规下载思路使用a标签download属性下载附件,但是浏览器兼容性不好,而且针对视频、音频、pdf等浏览器可预览文件默认还是预览而无法直接下载
经过多位小伙伴调试给出最终解决方案,看代码
<!-- 七牛云下载-->
<a onclick="downLoadByUrl('https://qiniu.sicaa.org.cn/1670574047545.mp4')">下载</a>
<script>
function downLoadByUrl(url){
var xhr = new XMLHttpRequest();
//GET请求,请求路径url,async(是否异步)
xhr.open('GET', url, true);
//设置请求头参数的方式,如果没有可忽略此行代码
// xhr.setRequestHeader("token", token);
//设置响应类型为 blob
xhr.responseType = 'blob';
//关键部分
xhr.onload = function (e) {
//如果请求执行成功
if (this.status == 200) {
var blob = this.response;
var filename = "我是文件名.mp4";//如123.xls
var a = document.createElement('a');
//创键临时url对象
var url = URL.createObjectURL(blob);
a.href = url;
a.download=filename;
a.click();
//释放之前创建的URL对象
window.URL.revokeObjectURL(url);
}
};
//发送请求
xhr.send();
}
</script>