Comment puis-je créer et télécharger des fichiers côté client en JavaScript sans interaction avec le serveur ?

Création de fichiers en mémoire pour le téléchargement par l'utilisateur sans interaction avec le serveur

Lorsque vous travaillez avec des applications Web, il peut être avantageux de créer des fichiers sur le client côté et offrir aux utilisateurs la possibilité de les télécharger sans interagir avec le serveur. Cette approche offre des avantages tels que la réduction de la charge du serveur et la possibilité d'accéder aux données hors ligne.

Une méthode pour y parvenir consiste à utiliser l'API JavaScript Blob. Pour créer un fichier texte en mémoire, vous pouvez suivre les étapes décrites ci-dessous :

function download(filename, text) {
  var data = new Blob([text], { type: 'text/plain' });
  var url = URL.createObjectURL(data);
  var element = document.createElement('a');
  element.setAttribute('href', url);
  element.setAttribute('download', filename);
  element.click();
  URL.revokeObjectURL(url);
}

Dans ce code, un objet Blob est d'abord créé à l'aide des données texte fournies. L'API Blob permet la création d'objets de type fichier qui peuvent être manipulés en mémoire sans avoir besoin de les conserver sur le disque. Ensuite, une URL est créée à partir du Blob à l’aide de la méthode createObjectURL. Cette URL peut être utilisée pour référencer l'objet de type fichier et déclencher le processus de téléchargement.

Un élément d'ancrage () est créé et configuré avec les attributs nécessaires pour lancer le téléchargement. L'attribut href spécifie l'URL de l'objet de type fichier et l'attribut download définit le nom de fichier souhaité pour le fichier téléchargé. En déclenchant un événement de clic sur l'élément d'ancrage, le navigateur invitera l'utilisateur à enregistrer le fichier.

Enfin, il est important de révoquer l'URL créée à l'aide de revokeObjectURL une fois le téléchargement terminé. Cela garantit que l'objet de type fichier est supprimé de la mémoire et que les ressources sont libérées. Le code fourni peut être facilement intégré à votre application Web pour offrir aux utilisateurs un moyen pratique de télécharger des fichiers sans impliquer le serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!