通用fetch、iframe 原生js下载视频 自定义文件名

下载视频,支持跨域。

  • url:视频地址
  • name:自定义下载文件名字

1、a标签通过转换后的url下载文件(视频不会跳转)

  • axio 类同,但是需要下载依赖,fetch是windows下自带的,更方便
  • 有个缺点:http网页不能下载https的视频、https不能下载http。已在代码处理截掉头部处理
// 测试视频
const video_url = 'https://media.w3.org/2010/05/sintel/trailer.mp4';

// 下载函数
function daonload(url, name){
    
    
	// 去掉头部,解决http和https之间,网页和资源不同禁止下载问题
	const getUrl = url.replace(/http:|https:/, '');
	fetch(getUrl )
	.then(res => res.blob())
	.then(blob => {
    
    
		// 获取名字(当未传递name时使用),根据实际情况,如果有? 后缀参数根据自行截取
		const urlSplitArr = getUrl.split('/');
        
		const a = document.createElement("a");
		const objectUrl = window.URL.createObjectURL(blob);
		a.download = name || urlSplitArr[urlSplitArr.length - 1];
		a.href = objectUrl;
		a.click();
		window.URL.revokeObjectURL(objectUrl);
		a.remove();
	})
}

// 调用下载
download(video_url, ('test_video'+Date.now()))

2、iframe标签实现下载文件

// 测试视频
const url = 'https://media.w3.org/2010/05/sintel/trailer.mp4';

// 下载函数
function download(url){
    
    
	const iframe = document.createElement("iframe");
	iframe.setAttribute("hidden","hidden");
	document.body.appendChild(iframe);
	iframe.onload = () => {
    
    
		if(iframe){
    
    
			iframe.setAttribute('src','about:blank');
		}
	};
	
	iframe.setAttribute("src",url);
}

// 调用下载
download(url)

其他方案一般般,也有用插件的,暂时就这两个实用一些。
注意,此方案曾遇跨域风险


转载自:https://blog.csdn.net/yun_master/article/details/114551493

猜你喜欢

转载自blog.csdn.net/weixin_44461275/article/details/131090645