摘要：
下载url视频有几种解决方案：1.标签下载。但是，由于浏览器机制，预览将首先打开。这对于图像和视频都是如此。如果您想通过a标记直接下载，可以设置Nginx配置//url是资源地址//newName是资源的原始名称//不能修改a标记的url标记的下载属性。此时，我们需要使用nginx的默认配置重命名来重置名称consttepmUrl=url+？renameto='+newName服务器｛listen8086；服务器名称192.168.1.66；位置/｛代理passhttp://127.0.0.1:8086 ; roothtml；indexindex.html索引。htm；}location/image/{roothtml/devGif；autoindexon；//主要配置是if（$request_filename~*^.*？.$）｛add_headerContent Disposition“attachment”；｝//End｝｝2.blob对象通过前端二进制文件流容器进行操作。
下载url视频有以下几种方案：
1.a标签download，但是这种因为浏览器机制会先打开预览，图片与视频都是这样。在预览页面右键下载。如果想通过a标签直接下载，可以通过设置Nginx配置。
// url为资源地址 // newName为资源的原名称 // a标签的url a标签的download属性并不能修改名称，这时候我们就需要用到nginx的一个默认配置renameto达到重置名称的效果 const tepmUrl = url + '?renameto=' + newName
server {
listen 8086;
server_name 192.168.1.66;
location / {
proxy_pass http://127.0.0.1:8086;
root html;
index index.html index.htm;
}
location /image/ {
root html/devGif;
autoindex on;
// 主要配置
if ($request_filename ~* ^.*?.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx|jpg|png)$){
add_header Content-Disposition 'attachment';
}
//end
}
}
2.通过前端二进制文件流容器，blob对象进行操作。通过xmlHttpRequest进行访问视频url地址，得到视频数据后
转为二进制文件流保存在blob对象， 再通过createObjectURL创建一个包含二进制文件流额url，再通过创建
a标签设置下载地址，主动调用下载操作，进行视频二进制文件流下载
示例代码如下：
function downFile() {
let url = 'https://xxxx.com"
let name = '视频资源'
let xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob' // 返回类型blob
// 监听进度
xhr.onprogress = function (e) {
if (e.lengthComputable) {
// 文件总体积
console.log(e.total)
// 已下载体积
console.log(e.loaded)
}
}
xhr.onload = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let blob = this.response
// 转换一个blob链接
let u = window.URL.createObjectURL(new Blob([blob]))
let a = document.createElement('a')
a.download = name
a.href = u
a.style.display = 'none'
document.body.appendChild(a)
a.click()
a.remove()
// 释放
window.URL.revokeObjectURL(u)
}
}
xhr.onerror = function () {
console.log('失败')
}
xhr.send()
},