Comment puis-je télécharger un fichier côté client à l'aide de JavaScript sans interaction avec le serveur ?

Comment télécharger un fichier sans interaction avec le serveur à l'aide de JavaScript

Lors de la création d'un fichier que les utilisateurs peuvent télécharger, les problèmes de sécurité empêchent généralement l'écriture directe sur leur ordinateur. Cependant, il est possible de créer un fichier et de proposer aux utilisateurs de l'enregistrer sans impliquer le serveur.

Solution HTML5

Pour les navigateurs prenant en charge HTML5, vous pouvez utiliser le code suivant :

function download(filename, text) {
  // Create an anchor element pointing to the file's content
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  // Hide the anchor element
  element.style.display = 'none';

  // Append the element to the body to enable the download
  document.body.appendChild(element);

  // Simulate a click event to trigger the download
  element.click();

  // Remove the anchor element to prevent further interaction
  document.body.removeChild(element);
}

Utilisation

Utilisez cette fonction dans votre code HTML comme suit :

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Lorsqu'un l'utilisateur saisit un nom de fichier et le contenu du fichier dans le formulaire et clique sur le bouton "Télécharger", le fichier sera téléchargé sans interaction avec 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!