Télécharger le fichier en Angular

Nous présenterons comment télécharger un fichier dans Angular en un clic de bouton et montrerons un exemple.

Téléchargement de fichier en Angular

Il est simple de télécharger un fichier dans Angular. On peut télécharger un fichier en utilisant l’attribut HTML5 download.

# angular
<a href="FilePath.csv"
class="btn"
target="_blank"
download="FileName.csv"
>Download Now</a>

Exemple

Tout d’abord, nous allons créer un dossier assets dans le dossier src, et nous stockerons le fichier que nous voulons télécharger dans le dossier assets.

Nous allons ajouter le code suivant dans app.component.html.

# angular
<hello name="{{ name }}"></hello>
<a href="assets/download.csv"
class="btn btn-default"
target="_blank"
download="download.csv"
>Download Now</a>

Production :

Nous allons styliser notre bouton en ajoutant le code suivant dans le app.component.css.

# angular
p {
  font-family: Lato;
}
.btn{
  padding: 10px;
  background-color: blueviolet;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

Production :

Lorsque nous cliquons sur le bouton Download Now, il téléchargera le fichier stocké dans le dossier assets.

Production :