Datei herunterladen in Angular

Wir stellen vor, wie Sie eine Datei in Angular per Knopfdruck herunterladen und zeigen ein Beispiel.

Dateidownload in Angular

Es ist einfach, eine Datei in Angular herunterzuladen. Wir können eine Datei mit dem HTML5-Attribut download herunterladen.

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

Beispiel

Zuerst erstellen wir einen Ordner assets im Ordner src und speichern die Datei, die wir herunterladen möchten, im Ordner assets.

Wir werden den folgenden Code in app.component.html hinzufügen.

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

Ausgabe:

Wir gestalten unseren Button, indem wir den folgenden Code in die app.component.css einfügen.

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

Ausgabe:

Wenn wir auf die Schaltfläche Download Now klicken, wird die im Ordner assets gespeicherte Datei heruntergeladen.

Ausgabe: