Как скачать большой файл с помощью JavaScript

1

Мне нужно загрузить большой файл с помощью JavaScript с помощью XMLHttpRequest или извлечения без сохранения файла сначала в RAM-Memory.

Обычная загрузка ссылок не работает для меня, потому что мне нужно отправить токен-носитель в заголовок запроса.

Мне удалось загрузить файл, но это "решение", оно сначала сохраняет файл в RAM-памяти, прежде чем я получу диалог сохранения, так что браузер будет торможеть, если файл больше, чем доступная RAM-память.

Вот мое "решение" с выборкой:

        var myHeaders = new Headers();
        myHeaders.append('Authorization', 'Bearer ${token}');

        var myInit = { method: 'GET',
            headers: myHeaders,
            mode: 'cors',
            cache: 'default' };
        var a = document.createElement('a');

        fetch(url,myInit)
            .then((response)=> {
                return response.blob();
            })
            .then((myBlob)=> {
                a.href = window.URL.createObjectURL(myBlob);
                var attr = document.createAttribute("download");
                a.setAttributeNode(attr);
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                a.remove();
            });

И вот мое "решение" с XMLHttpRequest:

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = ()=>{
            if (xhttp.readyState == 4){
                if ((xhttp.status == 200) || (xhttp.status == 0)){
                    var a = document.createElement('a');
                    a.href = window.URL.createObjectURL(xhttp.response); // xhr.response is a blob
                    var attr = document.createAttribute("download");
                    a.setAttributeNode(attr);
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                }
            }
        };
        xhttp.open("GET", url);
        xhttp.responseType = "blob";
        xhttp.setRequestHeader('Authorization', 'Bearer ${token}');
        xhttp.send();

Вопрос в том, как я могу загружать файлы, большие, чем доступная RAM-память, и в то же время устанавливать заголовки?

  • 0
    Вы можете найти ответ здесь: stackoverflow.com/questions/4545311/…
  • 0
    @juancab Загрузка файлов jQuery не может быть решением, я даже не могу отправить свои заголовки (токен на предъявителя), если я не ошибаюсь, jQuery. швы загрузки файла, чтобы быть просто решением для того, что я уже решил, и это получает диалог сохранения. Я не проверял, но я думаю, что загрузка файла jQuery будет иметь ту же проблему, что и я, и это загрузка файлов большего размера, чем RAM-память, пожалуйста, исправьте меня, если я ошибаюсь.
Теги:
xmlhttprequest
fetch-api

1 ответ

-1

Как показано в StreamSaver.js (ссылка ниже), вы можете работать с потоками, чтобы обходить эту проблему.

Вы можете попробовать StreamSaver.js (Отказ от ответственности: я не являюсь владельцем этого репо). Кажется, вы решили, что хотите, насколько это не совместимо с кросс-браузером. В настоящее время он поддерживается только с помощью Chrome +52 и Opera +39.

Кроме того, есть FileSaver.js (отказ от ответственности: я не являюсь владельцем этого репо), но вы столкнулись с теми же проблемами, с которыми вы работаете в настоящее время.

  • 0
    Спасибо за ваш ответ, я знаю о StreamSaver.js, но я просто не могу поверить, что во времена, когда фреймворки, такие как angular и реагируют, (для которых использование AJAX имеет решающее значение) единственное «решение», которое можно find - это одна библиотека, которая поддерживает только Chrome (практически никто не использует Opera) ?!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню