URLから4つのファイルをダウンロード

Question

私はfirebaseを使って作業しています。私は自分のFirebaseストレージに画像を保存して、その画像をビューに表示します。各画像にはボタンがあります。どのように私はそれを行うことができます、今まで私は角度を使用してこれを行う方法を見つけることができなかった画像オブジェクト私はdownloadUrl私は画像をアップロードし、画像をダウンロードし

コンポーネント

<div class="wrapper-gallery" id="photos_container"> 
     <div class="mix col-xs-12 col-sm-4 col-md-3 item-photo" *ngFor="let photo of couplePhotos | async | sortByFavorites: sortBy | sortByTime: sortBy"> 
     <div class="photo"> 
      <img class="img-fluid" src="{{photo.data.photo_url}}" alt="{{photo.data.name}}"> 
      <button class="delete" (click)="deletePhoto(photo.id, photo.data.name)"><span class="icon-cross"></span></button> 
      <a class="search zoom" data-fancybox="wedding" href="{{photo.data.photo_url}}"><span class="icon-search"></span></a> 
      <button class="star" [ngClass]="{'start-on': photo.data.favorite == true}" (click)="toggleFavorite(photo.id, photo)"><span class="icon-star-full"></span></button> 
      <button class="download" (click)="downloadImg()"><span class="icon-download"></span></button> 
      <a [href]="photo.data.photo_url" download></a> 
     </div> 
     </div> 
    </div> 

Answer 1

のようなボタンを作成することができます。機能userSettingsにおける単なる文字列（現在のユーザーのログインのID）とfilenameがfirebaseストレージ

ダウンロード機能

public downloadFile(userSettings: string, filename): void { 
    this.storageRef.ref().child(`weddingDreamPhotos/${userSettings}/${filename}`) 
     .getDownloadURL().then((url) => { 
      const xhr = new XMLHttpRequest(); 
      xhr.responseType = 'blob'; 
      xhr.onload = (event) => { 
      /* Create a new Blob object using the response 
      * data of the onload object. 
      */ 
      const blob = new Blob([xhr.response], { type: 'image/jpg' }); 
      const a: any = document.createElement('a'); 
      a.style = 'display: none'; 
      document.body.appendChild(a); 
      const url = window.URL.createObjectURL(blob); 
      a.href = url; 
      a.download = filename; 
      a.click(); 
      window.URL.revokeObjectURL(url); 
      }; 
      xhr.open('GET', url); 
      xhr.send(); 
     }).catch(function(error) { 
      // Handle any errors 
      console.log(error); 
     }); 
     } 

Answer 2

試し：

download(url, downloadName) { 
    leta = document.createElement("a"); 
    document.body.appendChild(a); 
    a.href = url; 
    a.download = downloadName; 
    a.click(); 
    document.body.removeChild(a); 
    } 

Answer 3

あなたは、他のいくつかは、これまでのところ、これはfirebaseストレージを使用して、これを作るための最善の方法ですが、私は答えを投稿ここで同じ問題を抱えているだけの場合にはその

<a [href]="image.downloadUrl" download></a>