Comment télécharger un fichier avec React.js ?
Le framework React permet de créer entièrement son site internet en JavaScript. Grâce à la combinaison avec un serveur Node.js, vous n'avez plus besoin de mixer des technologies pour le front-office et le back-office de votre site. Néanmoins, il existe quand même quelques fonctionnalités où, même si React et le JavaScript peuvent en gérer une partie, il est nécessaire de s'appuyer sur le serveur. Le téléchargement de fichier en fait partie.
Pour qu'un fichier puisse être indiqué correctement par un serveur au navigateur, une norme précise a été créée : la norme RFC 2616. Cette norme définit 2 entêtes décrivant un fichier et la manière de le gérer. Il s'agit des entêtes "Content-type" et "Content-disposition". Vous devez configurer votre serveur pour qu'il envoie ces entêtes pour lancer le téléchargement du fichier. L'entête "Content-type" définit le type de fichier dont il s'agit.
# Image PNG Content-Type: image/png # Fichier PDF Content-type:application/pdf # Type inconnu Content-type:application/octet-stream
Le deuxième entête, "Content-disposition" permet d'indiquer au navigateur la manière de se comporter avec le fichier. La valeur "inline" indique au navigateur d'ouvrir directement le fichier s'il sait comment faire, et si ce n'est pas le cas, de le télécharger. La valeur "attachment" demande par contre au navigateur de télécharger directement le fichier sans l'ouvrir. L'attribut "Filename" permet d'indiquer un nom de fichier souhaité.
# Ouverture dans le navigateur s'il peut sinon téléchargement Content-Disposition: inline; filename="picture.png" # Téléchargement direct Content-Disposition: attachment; filename="picture.png"
Si vous souhaitez quand même le faire avec React uniquement, il existe un attribut HTML permettant le téléchargement direct. Il s'agit de l'attribut "download" de la balise de lien <a>. Par contre, cet attribut a des limitations. Il n'est pas pris en charge sur iOS et Internet Explorer. Sur Android, dans les versions récentes, vous ne pouvez pas renvoyer vers un fichier situé sur un autre domaine, sinon le téléchargement sera bloqué.
<a href="/mon-fichier.pdf" download>Cliquez pour télécharger</a>