Je reçois l'URL du fichier en réponse d'API. Lorsque l'utilisateur clique sur le bouton de téléchargement, le fichier doit être téléchargé sans ouvrir l'aperçu du fichier dans un nouvel onglet. Comment y parvenir en react js?
Déclenchement du téléchargement du navigateur à partir du serveur frontal n’est pas fiable.
Ce que vous devez faire est de créer un noeud final qui, une fois appelé, fournira les en-têtes de réponse corrects, ce qui déclenchera le téléchargement du navigateur.
Le code frontal ne peut que faire beaucoup. L'attribut 'download', par exemple, pourrait simplement ouvrir le fichier dans un nouvel onglet, en fonction du navigateur.
Les en-têtes de réponse que vous devez consulter sont probablement Content-Type
et Content-Disposition
. Vous devriez vérifier cette réponse pour une explication plus détaillée.
Ce n'est pas lié à React. Toutefois, vous pouvez utiliser l'attribut download
sur l'élément ancre <a>
pour indiquer au navigateur de télécharger le fichier.
<a href='/somefile.txt' download>Click to download</a>
Ceci n'est pas supporté sur tous les navigateurs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
les navigateurs sont suffisamment intelligents pour détecter le lien et le télécharger directement lorsque vous cliquez sur une balise d'ancrage sans utiliser l'attribut de téléchargement.
après avoir récupéré votre lien de fichier depuis l’API, utilisez simplement javascript en créant un tag ancre et supprimez-le après un clic dynamique immédiat et immédiat.
const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);