@Evelate

Как сделать индикатор загрузки из тега?

Здравствуйте,
<a href="/Гет запрос" download="имя файла">Скачать файл</a>

С помощью тега "a" происходит скачивание файла.
На сервере при получении запроса с помощью fs.createReadStream() считывается файл и отправляется частями клиенту.
Как из этого реализовать индикатор/прогресс загрузки с сервера на чистом js? В идеале, как можно проще пример)
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 1
kocherman
@kocherman
// Шаг 1: Создаём запрос серверу
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');

const reader = response.body.getReader();

// Шаг 2: получаем размер контента/файла
const contentLength = +response.headers.get('Content-Length');

// Шаг 3: читаем данные
let receivedLength = 0; // данных получено (байт)
let chunks = []; // массив кусочков файла
while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  chunks.push(value);
  receivedLength += value.length;

  console.log(`Получено ${receivedLength} байт из ${contentLength} байт`)
}

// Шаг 4: соединяем кусочки в единный Uint8Array
let chunksAll = new Uint8Array(receivedLength); // (4.1)
let position = 0;
for(let chunk of chunks) {
  chunksAll.set(chunk, position); // (4.2)
  position += chunk.length;
}

// Шаг 5: декодируем в нужный формат
let result = new TextDecoder("utf-8").decode(chunksAll);

// Готово!
let commits = JSON.parse(result);
alert(commits[0].author.login);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы