1.最简单的方法是使用标签+download属性，直接设置href和download属性即可，适用于同源文件下载；2.通过window.location.href利用javascript触发下载，原理与第一种方法相同，但同样受限于同源策略；3.使用blob对象和url.createobjecturl，通过fetch获取文件数据并转为blob对象，再创建临时url实现下载，支持跨域、可自定义请求头及控制下载进度。针对大文件下载优化用户体验可通过监听onprogress事件显示下载进度、添加range请求头实现断点续传、使用web workers将下载任务移至后台线程避免阻塞主线程。处理下载失败情况包括：捕获fetch错误、检查http状态码、设置重试机制提高成功率、记录错误日志便于排查问题。
前端文件下载，简单来说，就是让用户点击一个按钮或者链接，浏览器就能自动下载一个文件到本地。这事儿听起来简单，但实现起来还是有几种不同的路子。
直接输出解决方案即可
立即学习“前端免费学习笔记（深入）”；
这是最直接，也是最常用的方法。你只需要一个标签，然后设置href属性为文件的URL，再加一个download属性，指定下载的文件名就行了。
这种方法的好处是简单粗暴，浏览器原生支持，兼容性好。但缺点也很明显，它只能下载同源的文件，如果文件在不同的域名下，浏览器会阻止下载，除非服务器允许跨域。而且，这种方式无法控制下载进度，也无法自定义请求头。
利用 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.jsself.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);}
通过记录错误日志，可以方便地排查问题，提高代码质量。
以上就是js如何实现文件下载功能 前端文件下载的3种实现方法！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1505781.html
微信扫一扫 
支付宝扫一扫 
