正文

掌握JS获取浏览器下载完成状态：轻松实现文件下载进度实时监控

/0 浏览量
1105

在Web开发中，文件下载是一个常见的操作。为了提升用户体验，实时监控下载进度显得尤为重要。JavaScript（JS）提供了多种方法来获取浏览器下载的完成状态。本文将详细介绍如何使用JS轻松实现文件下载进度实时监控。

1. 使用XMLHttpRequest对象

XMLHttpRequest是早期浏览器中实现文件下载进度监控的主要方式。以下是使用XMLHttpRequest实现文件下载进度监控的基本步骤：

1.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1.2 配置请求参数

xhr.open('GET', 'path/to/file', true);
xhr.responseType = 'blob'; // 设置响应类型为blob，用于下载文件

1.3 监听事件

xhr.onload = function () {
  if (xhr.status === 200) {
    // 下载完成，可以进行文件处理
    var blob = xhr.response;
    // 创建链接并触发下载
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = 'filename'; // 设置下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(a.href);
  }
};

xhr.onprogress = function (event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log('下载进度：' + percentComplete + '%');
  }
};

1.4 发送请求

xhr.send();

2. 使用fetch API

fetch API是现代浏览器中实现文件下载进度监控的推荐方法。以下是使用fetch API实现文件下载进度监控的基本步骤：

2.1 发起请求

fetch('path/to/file')
  .then(function (response) {
    if (!response.ok) {
      throw new Error('网络响应错误');
    }
    return response.blob();
  })
  .then(function (blob) {
    // 创建链接并触发下载
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = 'filename'; // 设置下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(a.href);
  })
  .catch(function (error) {
    console.error('下载失败：', error);
  });

2.2 监听进度事件

在fetch API中，可以通过监听ReadableStream对象的onprogress事件来获取下载进度。

var reader = response.body.getReader();
var chunks = []; // 存储接收到的数据块
var receivedLength = 0; // 接收到的数据长度

function push() {
  reader.read().then(function ({ done, value }) {
    if (done) {
      console.log('下载完成');
      return;
    }
    chunks.push(value);
    receivedLength += value.length;
    var percent = (receivedLength / event.total) * 100;
    console.log('下载进度：' + percent + '%');
    push();
  });
}

push();

3. 总结

通过以上方法，我们可以轻松实现文件下载进度实时监控。在实际应用中，可以根据需求选择合适的API进行开发。希望本文能帮助你更好地了解JS获取浏览器下载完成状态的方法。

-- 展开阅读全文 --