Télécharger des fichiers dans React

1. Utilisez l’attribut download pour télécharger des fichiers dans React
2. Utilisez le plugin js-file-download pour télécharger des fichiers dans React
3. Limitations frontales du téléchargement d’un fichier dans React

Lors de la création d’une application React, vous devez parfois autoriser l’utilisateur à télécharger un fichier. Par exemple, s’ils achètent un billet, ils voudront peut-être les télécharger au format PDF.

Cet article explorera plusieurs façons de télécharger des fichiers dans React.

Utilisez l’attribut download pour télécharger des fichiers dans React

Généralement, les développeurs Web utilisent l’élément d’ancrage <a> pour naviguer dans une autre page. L’élément <a> accepte également l’attribut download. Il indique au navigateur d’enregistrer le fichier situé à l’URL spécifiée au lieu de modifier l’URL.

Sans valeur spécifiée, le navigateur devinera le nom du fichier et son extension. Si vous spécifiez la valeur, elle sera interprétée comme un nom de fichier.

Le composant <Link> fait partie du package react-router. C’est un excellent outil pour une navigation transparente dans les applications à page unique. Comme l’élément d’ancrage, il accepte également l’attribut download et fonctionne de la même manière.

Actuellement, 94,5 % des internautes du monde entier utilisent les navigateurs prenant en charge cet attribut. Il a d’autres limitations et conditions. Pour en savoir plus sur l’attribut download, lisez la documentation officielle.

Dans certains cas, si le navigateur ne prend pas en charge l’attribut download, le fichier sera ouvert dans le nouvel onglet.

Utilisez le plugin js-file-download pour télécharger des fichiers dans React

Le plus pratique est d’utiliser un package externe pour télécharger un fichier. Il existe de nombreuses options, mais js-file-download est la plus simple à utiliser.

Il indique au navigateur d’enregistrer le fichier à partir de la source URL spécifiée. Il présente des avantages par rapport à l’utilisation de l’attribut download car il peut enregistrer plus de fichiers.

Jetons un coup d’œil à l’exemple :

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>
  );
}

Dans cet exemple, nous spécifions la source et le nom préféré du fichier. Ensuite, nous passons ces valeurs à la fonction fileDownload, importée du package js-file-download. Cette fonction fait tout le reste pour nous.

Si vous exécutez ce code dans votre environnement local create-react-app, il téléchargera l’image à partir du lien.

Limitations frontales du téléchargement d’un fichier dans React

Vous pouvez utiliser l’une ou l’autre des deux approches décrites dans cet article en de rares occasions. Cependant, en règle générale, utiliser du code frontal pour déclencher un téléchargement est une mauvaise idée.

Les navigateurs bloquent généralement les téléchargements immédiats pour des raisons de sécurité. Il est fait pour empêcher les propriétaires de sites Web de forcer leurs utilisateurs à télécharger des logiciels malveillants.

Au lieu de cela, vous devez créer un point de terminaison qui renverra les en-têtes de réponse pour déclencher le téléchargement d’un fichier. Et n’oubliez pas de ne pas lancer le téléchargement du fichier sans l’autorisation de l’utilisateur.