Dateien herunterladen in React

1. Verwenden Sie das Attribut download, um Dateien in React herunterzuladen
2. Verwendung von das js-file-download Plugin zum Herunterladen von Dateien in React
3. Front-End-Einschränkungen beim Herunterladen einer Datei in React

Beim Erstellen einer React-Anwendung müssen Sie dem Benutzer manchmal erlauben, eine Datei herunterzuladen. Wenn sie beispielsweise ein Ticket kaufen, möchten sie es vielleicht als PDF herunterladen.

In diesem Artikel werden mehrere Möglichkeiten zum Herunterladen von Dateien in React untersucht.

Verwenden Sie das Attribut download, um Dateien in React herunterzuladen

Typischerweise verwenden Webentwickler das Ankerelement <a>, um auf einer anderen Seite zu navigieren. Das Element <a> akzeptiert auch das Attribut download. Es weist den Browser an, die Datei unter der angegebenen URL zu speichern, anstatt die URL zu ändern.

Ohne einen angegebenen Wert errät der Browser den Namen und die Erweiterung der Datei. Wenn Sie den Wert angeben, wird er als Dateiname interpretiert.

Die Komponente <Link> ist Teil des Pakets react-router. Es ist ein großartiges Tool für die nahtlose Navigation innerhalb von Single-Page-Anwendungen. Wie das Ankerelement akzeptiert es auch das Attribut download und funktioniert genauso.

Derzeit verwenden 94,5 % der Internet-Surfer weltweit Browser, die dieses Attribut unterstützen. Es hat andere Einschränkungen und Bedingungen. Um mehr über das Attribut download zu erfahren, lesen Sie die offiziellen Dokumente.

In manchen Fällen, wenn der Browser das Attribut download nicht unterstützt, wird die Datei im neuen Tab geöffnet.

Verwendung von das js-file-download Plugin zum Herunterladen von Dateien in React

Am bequemsten ist es, ein externes Paket zum Herunterladen einer Datei zu verwenden. Es gibt viele Möglichkeiten, aber js-file-download ist am einfachsten zu verwenden.

Es weist den Browser an, die Datei von der angegebenen URL-Quelle zu speichern. Es hat Vorteile gegenüber der Verwendung des Attributs download, da es mehr Dateien speichern kann.

Schauen wir uns das Beispiel an:

import "./styles.css";
import axios from 'axios'
import fileDownload from 'js-file-download'
export default function App() {
  const handleClick = (url, filename) => {
    axios.get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      fileDownload(res.data, filename)
    })
  }
  return (
    <div className="App">
      <button onClick={() => {() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}}>
        Download the File</button>
    </div>
  );
}

In diesem Beispiel geben wir die Quelle und den bevorzugten Namen der Datei an. Dann übergeben wir diese Werte an die Funktion fileDownload, importiert aus dem Paket js-file-download. Diese Funktion erledigt alles andere für uns.

Wenn Sie diesen Code in Ihrer lokalen create-react-app-Umgebung ausführen, wird das Bild über den Link heruntergeladen.

Front-End-Einschränkungen beim Herunterladen einer Datei in React

In seltenen Fällen können Sie einen der beiden in diesem Artikel beschriebenen Ansätze verwenden. Als allgemeine Faustregel gilt jedoch, dass die Verwendung von Front-End-Code zum Auslösen eines Downloads keine gute Idee ist.

Browser blockieren in der Regel sofortige Downloads aus Sicherheitsgründen. Es soll verhindern, dass Website-Eigentümer ihre Benutzer zum Herunterladen von Malware zwingen.

Stattdessen sollten Sie einen Endpunkt erstellen, der die Antwortheader zurückgibt, um den Download einer Datei auszulösen. Und denken Sie daran, den Dateidownload nicht ohne die Erlaubnis des Benutzers zu starten.