js 实现浏览器下载视频2种方法

た入场券 2022-11-17 03:44 427阅读 0赞

## 第一种，这种比较节能，如果视频比较大。不会造成卡顿 ##

fetch('你的视频地址.mp4').then(res => res.blob()).then(blob => { 
     const a = document.createElement('a');
      document.body.appendChild(a)
      a.style.display = 'none'
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = '视频.mp4';
      a.click();
      document.body.removeChild(a)
      window.URL.revokeObjectURL(url);
    });

## 第二中，这种适合url地址中不带参数的地址，和text,wprd,pdf,等文件 ##

不带参数地址比如 http:xxx.xxx.com/down.mp4  
带参数地址比如 http:xxx.xxx.com/down.mp4?token=4165465164  
带参数的文件流过大会导致页面卡顿 ，【这时后就应该用第一种下载】

downloads(){ 
    			var url //下载地址
    			var xhr = new XMLHttpRequest();
    			xhr.open('get', url, true); // 也可以使用POST方式，根据接口
    			// xhr.setRequestHeader("dis_k",`cb9a62d3796e276f8707318b3c48ed3d`);
    			// xhr.setRequestHeader("dis_t",`1617786336`);
    			xhr.responseType = "blob"; // 返回类型blob
    
    			xhr.onload = function () { 
    			  if (this.status === 200) { 
    				var blob = this.response;
    				var reader = new FileReader();
    
    				reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
    				reader.onload = function (e) { 
    				  var a = document.createElement('a');
    				  a.download ='民间故事-'+weixinvideoplayer.title+'（完整版）'; //下载文件名
    				  a.href = e.target.result;	
    				  a.click();
    				  window.URL.revokeObjectURL(e.target.result)
    				};
    			  }
    			}; 
    			xhr.send();
    		},

前端面试题库 微信搜索 【MST题库】 查看面试题  
识图小程序 微信搜索 【花千蒲】 【识图灵】 查看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/df139b83d5604107a9681abcfafbcdde.png