it-swarm.com.de

so laden Sie die Datei in React js herunter

Ich erhalte eine Datei-URL als Antwort von API. Wenn der Benutzer auf die Download-Schaltfläche klickt, sollte die Datei heruntergeladen werden, ohne die Dateivorschau auf einer neuen Registerkarte zu öffnen. Wie erreicht man das in js reagieren? 

6
Sameer Thite

Das Auslösen eines Browser-Downloads vom Frontend aus ist nicht zuverlässig. 

Sie sollten einen Endpunkt erstellen, der beim Aufruf die richtigen Antwortheader bereitstellt und den Browser-Download auslöst. 

Front-End-Code kann nur so viel leisten. Das "download" -Attribut beispielsweise öffnet die Datei je nach Browser möglicherweise auf einer neuen Registerkarte.

Die Antwortheader, die Sie betrachten müssen, sind wahrscheinlich Content-Type und Content-Disposition. Sie sollten diese Antwort für genauere Erklärung überprüfen. 

3
Jackyef

Dies hat nichts mit React zu tun. Sie können jedoch das download-Attribut des <a>-Ankers verwenden, um den Browser anzuweisen, die Datei herunterzuladen.

<a href='/somefile.txt' download>Click to download</a>

Dies wird nicht von allen Browsern unterstützt: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

9
lipp

Wenn Sie React Router verwenden, verwenden Sie Folgendes:

<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>

Wo /files/myfile.pdf befindet sich in Ihrem public Ordner.

2
Javier López

browser sind intelligent genug, um den Link zu erkennen und direkt herunterzuladen, wenn Sie auf ein Ankertag klicken, ohne das Download-Attribut zu verwenden.

nachdem Sie Ihren Datei-Link von der API erhalten haben, verwenden Sie einfach Javascript, indem Sie den Anker-Tag erstellen, und löschen Sie ihn, nachdem Sie ihn dynamisch angeklickt haben.

const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
0