Angular2 FileSaver Октет / Поток Как показать статус загрузки в браузере File Downloader? - PullRequest
Новая
       20

Angular2 FileSaver Октет / Поток Как показать статус загрузки в браузере File Downloader?

1 голос
/ 31 марта 2020

Я много чего пробовал для этого, но до сих пор не могу заставить его работать. Я использую Angular2 и file-saver. Я вызываю API, который я написал, и отправит файл в формате потока октетов. При проверке я вижу, что файл загружается, и когда я жду загрузки всего файла, он отображается в моем браузере Chrome в левом нижнем углу. Тем не менее, я хотел бы видеть загрузку байтов / мегабайт в моем браузере, чтобы пользователь знал, что что-то происходит. Это то, что происходит, когда вы загружаете большие файлы, скажем, с AWS в браузере. Когда я просто запускаю свой API без Angular2, просто помещаю его в браузер, я получаю именно то, что хочу - появляется файл и chrome, и я вижу загружаемые байты. У кого-нибудь есть предложения? Я также видел, что мог использовать reportProgress в заголовке http, но я не хочу отображать прогресс в коде / пользовательском интерфейсе, я просто хочу, чтобы он отображался в браузере. Спасибо за любую помощь!

Также обратите внимание - я загружаю файл с S3, но из-за ограничений безопасности я не могу получить заранее заданный URL-адрес или что-то подобное, поэтому я должен использовать свой API в качестве proxy.

Код: 

import {saveAs} from 'file-saver';

            const url = 'http://127.0.0.1:5000/s3downloader/serveS3File/';
            const s3Path = encodeURIComponent(this.processedFilesSelected[0]);
            const headers = new HttpHeaders({
                Authorization: 'Bearer ', // Auth header
                // Accept: 'application/json',
                // ContentDisposition: 'attachment',
                // Connection: 'keep-alive',
                // ContentType: 'application/octet-stream',
                // responseType: 'blob'
            });
            return this.http2.get(url + s3Path, {headers, responseType: 'blob' as 'json' }).toPromise().then(
                blob => {
                    saveAs(blob, this.processedFilesSelected[0].substring(this.processedFilesSelected[0].lastIndexOf('/') + 1));
                    // const url2 = window.URL.createObjectURL(blob);
                    // window.open(url2);
                }
            );

Закомментированные заголовки также являются тем, что я отправляю в заголовке ответа моего API.

...