Angular 8 получить текстовый файл с заголовком аутентификации

Question

Я пытаюсь реализовать ссылку для скачивания для пользователей, чтобы загрузить запись в .txt файле.

Сначала это был простой <a> тег

<a href="http://localhost:8080/service/api/downloadFile?fileType=daily&trsDate=20190918">download</a>

, который я мог скачатьфайл с сервера в формате .txt. Но я обнаружил, что это не приносит Auth заголовок. Поэтому я попытался использовать метод http get для его извлечения.

service.js

  getCdrFile(url) {
    return this.http.get<any>(`${this.env.service}/service/api/downloadFile?` + url);
  }

component.js

downloadFile(url) {
    this.service.getCdrFile(url).subscribe(
      data => {
        console.log(data);
      },
      error => {
        console.log(error);
      }
    );
  }

Я могу успешно вызвать API с помощью auth head, после чего ничего не произошло после того, как я нажал кнопку загрузки, но txt-данные отображались на вкладке "response" в инструменте разработчика Chrome. Кроме того, я ничего не получил от console.log(data); в своем запросе http.

Можно ли как-нибудь загрузить файл? спасибо!

(и вот мой ответ)

# GENERAL
Request URL: http://localhost:8080/service/api/downloadFile?fileType=daily&trsDate=20190918
Request Method: GET
Status Code: 200 
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade

# RESPONSE HEADER
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Disposition: attachment; filename=20190918.txt
Content-Type: application/json
Date: Wed, 02 Oct 2019 03:51:01 GMT
Expires: 0
Pragma: no-cache
Server: nginx/1.15.2
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Answer 1

Вы можете создать ответ Blob, создать URL-адрес блоба и загрузить его на лету.

Служба:

• Измените свой сервис для полученияответ BLOB-объекта

getImage() {
  return this.httpClient.get(
    your_image_link, 
    {
      responseType: 'blob', // <-- add this
      headers: {your_headers}
    }
  );
}

Компонент :

• При нажатии на ссылку на странице обратитесь в службу, чтобы получить ответный BLOB-объект вашегоfile
• Создание URL-адреса большого двоичного объекта URL.createObjectUrl метод
• Создание фиктивного элемента привязки, назначающего URL-адрес большого двоичного объекта и имя файла для загрузки
• Инициирование события щелчка на привязкеelement
• удалить URL-адрес BLOB-объекта из браузера, используя метод URL.revokeObjectUrl

downloadImage() {
  this.service.getImage().subscribe(img => {
    const url = URL.createObjectURL(img);
    const a = document.createElement('a');
    a.download = "filename.txt";
    a.href = url;
    a.click();
    URL.revokeObjectURL(url);
  });
}

Stackblitz: https://stackblitz.com/edit/angular-kp3saz

Answer 2

У вас есть два способа загрузить файл с сервера.

1 :-) После получения ответа от HTTP-запроса на создание base64 и создание фиктивного тега привязки и загрузки.

2 :-) Изменить ответ бэкэнда как ответ загрузки.