Ход загрузки файла в браузере: Angular 5

Question

Я создаю приложение, которое использует REST API для загрузки файла. API возвращает файл сразу, когда вы нажмете на него. Поэтому я использую следующую логику для получения файла:

downloadFile(file) {
  this.service.downloadFile(file.id).subscribe((fileData) => {
  const a = document.createElement('a');
  document.body.appendChild(a);
  const blob = new Blob([data], { type: data.type });
  const url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = file.name;
  a.click();
  window.URL.revokeObjectURL(url);
  });
}

Приведенный выше код работает отлично. НО, он загружает файл в браузер, когда загружается весь файл, т. Е. Вы не будете видеть ход загрузки файла в браузере (как мы обычно видим, когда мы загружаем файл обычно в Chrome). Вы можете видеть, как он загружает файл на вкладке «сеть» консоли, но отображается только при загрузке всего файла. Кто-нибудь может дать какую-либо идею, как заставить его загрузить в браузере, чтобы он показал прогресс?

Answer 1

Для достижения этого решения нам нужно значение общего размера файла из API. Также вам нужно использовать HTTPClientModule, который поддерживает события индикатора выполнения.