JavaScript Créer et enregistrer un fichier

Ce tutoriel explique comment créer et enregistrer un fichier en JavaScript.

Il est facile de créer des fichiers et de les stocker côté serveur NodeJS, mais il existe peu d’options pour le faire côté client. Dans ce didacticiel, nous écrivons une fonction personnalisée qui nous aide à créer des fichiers à l’aide de données, puis à les enregistrer. Dans les navigateurs modernes, nous obtenons une fonction appelée msSaveOrOpenBlob qui nous aide à enregistrer un fichier. Mais dans les navigateurs plus anciens, on génère d’abord un lien vers le fichier puis on le télécharge en ajoutant l’attribut download sur la balise d’ancrage.

function downloadFiles(data, file_name, file_type) {
  var file = new Blob([data], {type: file_type});
  if (window.navigator.msSaveOrOpenBlob)
    window.navigator.msSaveOrOpenBlob(file, file_name);
  else {
    var a = document.createElement('a'), url = URL.createObjectURL(file);
    a.href = url;
    a.download = file_name;
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 0);
  }
}

Dans la fonction ci-dessus, nous vérifions si le navigateur prend en charge msSaveOrOpenBlob, et s’il est trouvé, nous l’utilisons pour enregistrer le fichier. Sinon, nous créons une balise d’ancrage pointant vers le fichier créé. Nous ajoutons l’attribut download à la balise d’ancrage et attachons cette balise au corps du document. Nous utilisons JavaScript pour cliquer dessus, ce qui déclenche le téléchargement, et de cette façon, nous sauvegardons le fichier. Nous supprimons ensuite cette balise d’ancrage du corps et révoquons l’URL créée.