一：为什么

在前端开发过程中，我们经常会遇到下载资源操作，那么有哪些方式呢

二：怎么做

1：采用创建a标签方式

	function downloadFile(url, fileName) {
	  const link = document.createElement('a');
	  link.href = 'https://admin.cqhxb.com/down/video/shanghai.mp4';
	  link.download = fileName;
	  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
	  link.click();
	}

2：采用blob方式，这里会先把资源请求到本地，然后进行打开下载，

	let url='https://admin.cqhxb.com/down/video/shanghai.mp4'
	let name='测试'
	function downloadFile() {
	  fetch(url)
	    .then(response => response.blob())
	    .then(blob => {
			console.log(blob)
	      const link = document.createElement('a');
	      link.href = URL.createObjectURL(blob);
	      link.download = name;
	      link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
	      link.click();
	    });
	}

3：采用xhr方式，本质还是blob进行下载

	let url='https://admin.cqhxb.com/down/video/shanghai.mp4'
	let name='测试'
	function downloadFile( ) {
	  const xhr = new XMLHttpRequest();
	  xhr.open('GET', url);
	  xhr.responseType = 'blob';
	  xhr.onload = function() {
		const blob = xhr.response;
		const link = document.createElement('a');
		link.href = URL.createObjectURL(blob);
		link.download = name;
		link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
		link.click();
	  };
	  xhr.send();
	}

4：直接调用api，浏览器重定向到文件的 URL，触发文件下载

let url='https://admin.cqhxb.com/down/video/shanghai.mp4'
	let name='测试'
	function downloadFile() {
	  window.location.href = url;
	}

5：利用三方库 download.js /FileSaver.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

function downloadFile(url, name) {
  download(url, name);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, fileName);
    });
}

6：通过页面a标签方式

<a href="https://admin.cqhxb.com/down/video/shanghai.mp4" rel="external nofollow"  download="测试.mp4">Download</a>

7：采用流式下载，对于大型文件或需要动态生成的文件，将文件内容分块发送到客户端，并通过 JavaScript 逐块接收和保存文件内容，

流式方式逐块传输文件内容，以避免一次性加载整个文件。然后，创建一个包含文件内容的 Blob 对象，并使用临时链接进行下载

	let url='https://admin.cqhxb.com/down/video/shanghai.mp4'
	let name='测试'
	function downloadFile() {
	  fetch(url)
	    .then(response => {
	      const reader = response.body.getReader();
	      const stream = new ReadableStream({
	        start(controller) {
	          function push() {
	            reader.read().then(({ done, value }) => {
	              if (done) {
	                controller.close();
	                return;
	              }
	              controller.enqueue(value);
	              push();
	            });
	          }
	          push();
	        }
	      });
	      const blob = new Blob([stream], { type: response.headers.get('Content-Type') });
	      const link = document.createElement('a');
	      link.href = URL.createObjectURL(blob);
	      link.download = name;
	      link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
	      link.click();
	    });
	}

8：使用iframe

	let url='https://admin.cqhxb.com/down/video/shanghai.mp4'
	let name='测试'
	function downloadFile() {
	  const iframe = document.createElement('iframe');
	  iframe.style.display = 'none';
	  iframe.src = url;
	  document.body.appendChild(iframe);
	}

三：总结

1：日常开发常用第一二种，具体实际根据项目进行选择，