前端下载文件 获取进度
时间: 2023-10-18 15:54:26 浏览: 52
要在前端下载文件并获取下载进度,可以使用 XMLHttpRequest 对象来实现。以下是一个简单的示例代码:
```javascript
function downloadFile(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error('File download failed'));
}
};
xhr.onprogress = function(event) {
if (event.lengthComputable) {
const progress = Math.round((event.loaded / event.total) * 100);
console.log(`Download progress: ${progress}%`);
}
};
xhr.onerror = function() {
reject(new Error('File download failed'));
};
xhr.send();
});
}
// 示例用法
const fileUrl = 'https://example.com/file.pdf';
downloadFile(fileUrl)
.then(blob => {
// 下载完成后的处理
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.pdf';
a.click();
})
.catch(error => {
console.error(error);
});
```
上述代码通过 XMLHttpRequest 发起了一个 GET 请求来下载文件,设置了 `responseType` 为 `blob`,这样可以获取到文件的二进制数据。通过监听 `onprogress` 事件,可以获取到下载进度的信息。在下载完成后,将下载的文件转换为 Blob 对象,并创建一个隐藏的 `<a>` 元素来实现文件的下载。
注意:由于涉及到跨域请求,请确保服务器端已经设置了正确的 CORS 头部,允许前端访问下载文件的资源。