前端文件下载，简单来说，就是让用户点击一个按钮或者链接，浏览器就能自动下载一个文件到本地。这事儿听起来简单，但实现起来还是有几种不同的路子。
直接输出解决方案即可
最简单的： 标签 + download 属性
立即学习“前端免费学习笔记（深入）”；
这是最直接，也是最常用的方法。你只需要一个标签，然后设置href属性为文件的URL，再加一个download属性，指定下载的文件名就行了。
<a href="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');这种方法的核心在于：
这种方法的优点是：
缺点是：
前端下载文件，这三种方法各有千秋，具体选择哪种，取决于你的实际需求。 如果只是简单下载同源文件，标签 + 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);
}通过记录错误日志，可以方便地排查问题，提高代码质量。
以上就是js如何实现文件下载功能 前端文件下载的3种实现方法！的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
566
