Angular 5 Как скачать удаленное изображение

Question

В Angular 5 я хочу скачать изображение с локального хоста (сервера).У меня уже есть имя изображения с путем как: http://localhost/projectName/uploads/3/1535352341_download.png Теперь я хочу скачать, нажав на кнопку.

В представлении HTML в Angular я написал следующий код:

<button (click)="downloadImage(car.carItem.carTitle)" type="button" class="btn btn-sm btn-info btn-action" tooltip="Download Image" placement="left" container="body"><i class="fa fa-download" aria-hidden="true"></i></button>

В файле .ts я делаю следующее, но он открывает изображение на той же вкладке:

downloadImage(imagePath){
  window.location = imagePath;
}

Я уже прошел пост Angular 4 изображения для прямой загрузки, но не может найти никакого решения.Поэтому, пожалуйста, не отмечайте его как дубликат.

Answer 1

<a href=" http://localhost/projectName/uploads/3/1535352341_download.png" class="btn clss"
                  target="_self" download>Download</a>

Answer 2

  constructor(private rs: RequestService,
          private http: Http,
          private sanitizer: DomSanitizer) {

}

 getImage(imageUrl: string) {
return this.http.get(imageUrl, {responseType: ResponseContentType.Blob})
  .map((res) => {
    return new Blob([res.blob()], {type: res.headers.get('Content-Type')});
  });

}

  downloadImage(downloadLink) {
this.orderService.getImage(downloadLink).subscribe(
  (res) => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(res);
    a.download = 'comprobante';
    document.body.appendChild(a);
    a.click();
  });

}

Answer 3

Поскольку ваше изображение находится на удаленном сервере, вы не можете загрузить его просто так, как если бы вы использовали собственные ресурсы в целях безопасности.

Вот как выглядит простая функция downloadUrl. Она попросит браузер загрузить любой заданный URL:

function downloadUrl(url: string, fileName: string) {
  let a: any = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.style = 'display: none';
  a.click();
  a.remove();
};

Поскольку мы не можем загружать удаленные ресурсы, нам придется создавать их на стороне клиента. Мы получим ресурс и создадим его собственный URL. Тогда мы, наконец, сможем скачать его, используя нашу функцию downloadUrl.

constructor(
  private http: HttpClient,
) { }

---

this.http.get(urlImage, { responseType: 'blob' }).subscribe(val => {
  console.log(val);
  let url = URL.createObjectURL(val);
  downloadUrl(url, 'image.png');
  URL.revokeObjectURL(url);
});