js实现下载文件,相信99%的前端都能轻松实现,但是如果下载的是视频,相信有的朋友肯定遇到过,视频没有下载,而是跳转了.一个小小的坑,下面我来分享一些方法避免这个问题

首先先来一个普通文件的下载实现方式

a标签直接通过url下载文件(视频会发生跳转)

// 测试视频
const video_url = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
// 下载函数
function download(url,name){
	const a = document.createElement("a");
	a.href = url;
	a.download = name;
	a.click();
	a.remove();
}
	
download(video_url, ('test_video'+Date.now()))

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

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

// 下载函数
function daonload(url,name){
	fetch(url)
	.then(res => res.blob())
	.then(blob => {
		const a = document.createElement("a");
		const objectUrl = window.URL.createObjectURL(blob);
		a.download = name;
		a.href = objectUrl;
		a.click();
		window.URL.revokeObjectURL(objectUrl);
		a.remove();
	})
}

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

iframe标签实现下载文件

// 测试视频
const video_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(video_url)

使用axios下载（不会发生跳转，原理和第二条例子一样，优先是方便获取下载进度），底层使用了原生js的ajax，直接使用aixios比较方便

为了方便新入行的同学，这里要先安装axios

npm i axios -S

下载

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

// 下载函数
function download(url, name, callback) {
  return new Promise((resolve, reject) => {
    axios(url, {
      method: 'get',
      responseType: 'blob',
      onDownloadProgress: (evt: any) => {
        console.log('progress: ' + progress + '%')
		if(typeof callback === 'function'){
		const progress = parseInt((evt.loaded / evt.total) * 100)
			callback(progress)
		}
      },
    })
      .then(res => {
        const type = res.headers['content-type'] //请求头中文件类型
        const blob = new Blob([res.data])
        const a = document.createElement('a')
        a.download = name + '.' + type?.replace('video/', '')
        a.href = URL.createObjectURL(blob)
        a.click()
        URL.revokeObjectURL(a.href)
        a.remove()
        resolve()
      })
      .catch(err => {
        reject(err)
      })
  })
}

download(video_url, ('test_video'+Date.now())).then(() => {
	// 下载完成todo
},(progress) => {
	// 下载进度
})