如何使用javascript显示文件下载进度？

function downloadFile(url, progressCallback, completeCallback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      completeCallback(xhr.response);
    }
  };

  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      var progress = (event.loaded / event.total) * 100;
      progressCallback(progress);
    }
  };

  xhr.send();
}

function updateProgress(progress) {
  // 更新页面上的进度条或其他元素
  console.log('下载进度：' + progress + '%');
}

function handleComplete(file) {
  // 在页面上进行进一步的处理，例如保存文件或显示下载完成的消息
  console.log('文件下载完成');
}

var fileUrl = 'https://example.com/file.pdf';
downloadFile(fileUrl, updateProgress, handleComplete);