Js下载文件

js下载文件

a标签直接通过url下载文件

const video = 'https://xxx';

function download(url,name){
	const a = document.createElement("a");
	a.href = url;
	a.download = name;
	a.click();
	a.remove();
}
	
download(video, 'demo')

a标签通过转换后的url下载文件

const video = 'https://xxx';

function download(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, 'demo')

// 调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容
// 虽然浏览器会在当前文档被卸载的时候释放，手动释放是为了更好的性能和更少的内存占用

iframe标签实现下载文件

const video = 'https://xxx';

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)

axios请求下载文件

const video = 'https://xxx';

function download(url, name, callback) {
  return new Promise((resolve, reject) => {
    axios(url, {
      method: 'get',
      responseType: 'blob',
      onDownloadProgress: (evt) => {
        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, 'demo', (progress) => {
	// 下载进度
})