1.最简单的方法是使用标签+download属性，直接设置href和download属性即可，适用于同源文件下载；2.通过window.location.href利用javascript触发下载，原理与第一种方法相同，但同样受限于同源策略；3.使用blob对象和url.createobjecturl，通过fetch获取文件数据并转为blob对象，再创建临时url实现下载，支持跨域、可自定义请求头及控制下载进度。针对大文件下载优化用户体验可通过监听onprogress事件显示下载进度、添加range请求头实现断点续传、使用web workers将下载任务移至后台线程避免阻塞主线程。处理下载失败情况包括：捕获fetch错误、检查http状态码、设置重试机制提高成功率、记录错误日志便于排查问题。
前端文件下载，简单来说，就是让用户点击一个按钮或者链接，浏览器就能自动下载一个文件到本地。这事儿听起来简单，但实现起来还是有几种不同的路子。
直接输出解决方案即可
-
最简单的： 标签 + download 属性
立即学习“前端免费学习笔记（深入）”；
这是最直接，也是最常用的方法。你只需要一个标签，然后设置href属性为文件的URL，再加一个download属性，指定下载的文件名就行了。
<a href="https://www.php.cn/faq/path/to/your/file.pdf" download="自定义文件名.pdf">下载PDF</a>
这种方法的好处是简单粗暴，浏览器原生支持，兼容性好。但缺点也很明显，它只能下载同源的文件，如果文件在不同的域名下，浏览器会阻止下载，除非服务器允许跨域。而且，这种方式无法控制下载进度，也无法自定义请求头。
-
利用 window.location.href
这种方法其实跟第一种类似，只不过是通过JavaScript来触发下载。
function downloadFile(url) { window.location.href = url; } // 调用 downloadFile('path/to/your/file.pdf');它的优缺点和第一种方法基本一样，也是简单方便，但受限于同源策略，无法控制下载过程。
-
使用 Blob 对象和 URL.createObjectURL
这种方法是目前最灵活，也是最常用的方法。它可以下载任何文件，无论是否同源，而且可以自定义请求头，控制下载进度。
function downloadFile(url, filename) { fetch(url, { method: 'GET', // 可以添加自定义请求头 headers: { 'Authorization': 'Bearer your_token' } }) .then(res => res.blob()) .then(blob => { const a = document.createElement('a'); const url = URL.createObjectURL(blob); a.href = url; a.download = filename; // 自定义文件名 document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); // 释放URL对象 }); } // 调用 downloadFile('path/to/your/file.pdf', '自定义文件名.pdf');这种方法的核心在于：
- fetch：发起网络请求，获取文件数据。可以设置自定义请求头，比如Authorization，用于身份验证。
- blob()：将响应数据转换为 Blob 对象。Blob 对象表示一个不可变的、原始数据的类文件对象。
- URL.createObjectURL(blob)：创建一个指向 Blob 对象的URL。这个URL可以被标签使用。
- URL.revokeObjectURL(url)：释放URL对象，防止内存泄漏。
这种方法的优点是：
- 可以下载任何文件，不受同源策略限制。
- 可以自定义请求头，进行身份验证。
- 可以控制下载进度（通过监听 fetch 的 onprogress 事件）。
- 灵活性高，可以根据需求进行定制。
缺点是：
- 代码相对复杂。
- 需要处理跨域问题（如果文件在不同的域名下）。
前端下载文件，这三种方法各有千秋，具体选择哪种，取决于你的实际需求。 如果只是简单下载同源文件，标签 + download 属性足够了。 如果需要下载不同源的文件，或者需要自定义请求头，那么 Blob 对象和 URL.createObjectURL 是更好的选择。
下载大文件时如何优化用户体验？
下载大文件，最怕的就是用户傻等，不知道下载进度。所以，优化用户体验的关键在于：
-
显示下载进度：
使用 Blob 对象和 URL.createObjectURL 方法时，可以通过监听 fetch 的 onprogress 事件来获取下载进度。
fetch(url, { method: 'GET' }) .then(res => { const contentLength = res.headers.get('content-length'); let receivedLength = 0; const reader = res.body.getReader(); return new ReadableStream({ start(controller) { function push() { reader.read().then(({ done, value }) => { if (done) { controller.close(); return; } receivedLength += value.length; // 计算下载进度 const progress = (receivedLength / contentLength * 100).toFixed(2); console.log(`下载进度：${progress}%`); // 更新UI显示下载进度 updateProgressUI(progress); controller.enqueue(value); push(); }); } push(); } }) .pipeTo(new WritableStream({ write(chunk) { // 这里可以处理下载的数据，比如写入文件 } })) .then(() => { console.log('下载完成'); }); }); function updateProgressUI(progress) { // 更新UI显示下载进度，比如更新进度条 document.getElementById('progress-bar').style.width = `${progress}%`; }这段代码的关键在于使用 ReadableStream 来读取响应数据，并在读取过程中计算下载进度，然后更新UI显示。
-
断点续传：
如果文件非常大，可以考虑支持断点续传。断点续传的原理是在请求头中添加 Range 字段，告诉服务器从哪个位置开始传输数据。
function downloadFileWithResume(url, filename, start) { fetch(url, { method: 'GET', headers: { 'Range': `bytes=${start}-` } }) .then(res => res.blob()) .then(blob => { // ... 后续处理与之前相同 }); }服务器也需要支持 Range 请求头，并返回 206 Partial Content 状态码。
-
使用 Web Workers：
下载大文件可能会阻塞主线程，导致页面卡顿。可以使用 Web Workers 将下载任务放在后台线程中执行，避免阻塞主线程。
// 主线程 const worker = new Worker('download-worker.js'); worker.postMessage({ url: 'path/to/your/file.pdf', filename: '自定义文件名.pdf' }); worker.onmessage = function(event) { const data = event.data; if (data.progress) { // 更新UI显示下载进度 updateProgressUI(data.progress); } else if (data.complete) { console.log('下载完成'); } }; // download-worker.js self.addEventListener('message', function(event) { const { url, filename } = event.data; downloadFile(url, filename, function(progress) { self.postMessage({ progress: progress }); }, function() { self.postMessage({ complete: true }); }); }); function downloadFile(url, filename, progressCallback, completeCallback) { // ... 下载文件的代码，并在下载过程中调用 progressCallback 更新进度 // 下载完成后调用 completeCallback }这种方法将下载任务放在后台线程中执行，避免阻塞主线程，提高页面响应速度。
如何处理下载失败的情况？
下载文件，难免会遇到各种各样的问题，比如网络中断、服务器错误等等。所以，我们需要处理下载失败的情况，给用户一个友好的提示。
-
监听 fetch 的错误：
fetch 函数会返回一个 Promise 对象，如果请求失败，Promise 对象会 reject。我们可以使用 catch 方法来捕获错误。
fetch(url, { method: 'GET' }) .then(res => res.blob()) .then(blob => { // ... 下载成功的处理 }) .catch(error => { console.error('下载失败：', error); // 显示错误提示 alert('下载失败，请稍后重试'); }); -
检查 HTTP 状态码：
如果服务器返回的 HTTP 状态码不是 200，也表示下载失败。我们可以检查 response.ok 属性来判断请求是否成功。
fetch(url, { method: 'GET' }) .then(res => { if (!res.ok) { throw new Error(`HTTP 错误：${res.status}`); } return res.blob(); }) .then(blob => { // ... 下载成功的处理 }) .catch(error => { console.error('下载失败：', error); // 显示错误提示 alert('下载失败，请稍后重试'); }); -
重试下载：
如果下载失败，可以尝试重新下载。可以设置一个重试次数，如果超过重试次数仍然失败，就放弃下载。
function downloadFileWithRetry(url, filename, retryCount = 3) { fetch(url, { method: 'GET' }) .then(res => { if (!res.ok) { throw new Error(`HTTP 错误：${res.status}`); } return res.blob(); }) .then(blob => { // ... 下载成功的处理 }) .catch(error => { console.error('下载失败：', error); if (retryCount > 0) { console.log(`尝试重新下载，剩余次数：${retryCount}`); // 延迟一段时间后重新下载 setTimeout(() => { downloadFileWithRetry(url, filename, retryCount - 1); }, 1000); } else { // 显示错误提示 alert('下载失败，请稍后重试'); } }); }这种方法在下载失败后，会尝试重新下载，提高下载成功率。
-
记录错误日志：
为了方便排查问题，可以将下载失败的错误信息记录到日志中。可以使用 console.error 或者第三方的日志库来记录错误信息。
fetch(url, { method: 'GET' }) .then(res => res.blob()) .then(blob => { // ... 下载成功的处理 }) .catch(error => { console.error('下载失败：', error); // 记录错误日志 logError('下载文件失败', { url: url, error: error.message }); // 显示错误提示 alert('下载失败，请稍后重试'); }); function logError(message, data) { // 将错误信息发送到服务器或者记录到本地 console.log(message, data); }通过记录错误日志，可以方便地排查问题，提高代码质量。
暂无评论内容