Enregistrer un fichier avec JavaScript

Il y a une tache bête comme bonjour : télécharger des fichiers sur son ordinateur.

Problème, comment faire quand il n’est pas sur internet et qu’il n’a pas d’adresse URL.

Comment c’est possible, tout simplement en travaillant dans le navigateur, en local. Il y a des systèmes pour enregistrer des données dans votre navigateur, le plus connu étant le cookie ! Mais il en existe d’autre comme le LocalStorage. Et là je vais commencer à parler plus technique.

Explication du cas

Je suis en train de faire un petit outil – crossTab, une simple page internet – pour éditer des fichiers CSV / TSV et autre fichier de tableur au format texte. Pour se faire, il faut ouvrir un fichier qui est en local. Ce fichier est stocké dans le LocalStorage du navigateur.

Comme je le disait, le problème pour l’enregistrer c’est que le script JavaScript n’a pas accès au système de fichier pour de simple raisons de sécurité. Et l’autre soucis c’est que les données qui sont dans le stockage local n’a pas d’URL pour le télécharger comme un simple fichier.

La solution

J’ai eu beaucoup de mal à trouver comment faire ça simplement. Je me suis inspiré de la doc sur MDN Using files from web applications et voici le résultat :

<a id="fileName"></a>
let file; // le fichier choisit et chargé en mémoire
function downloadfile() {
    const a = document.getElementById('downloadfile');
    const url = URL.createObjectURL(file);
    a.innerText = file.name;
    a.setAttribute("download", file.name);
    a.setAttribute("href", url);
}

J’ai trouvé beaucoup plus compliqué, sans arriver à faire marcher. Ce code ne fonctionne pas avec IE, mais avec Firefox et Edge oui.

J’en profite pour encourager tout les développeurs à faire simple, léger, efficace, et libre.

Si vous avez des suggestions d’amélioration n’hésitez pas à laisser un commentaire.


Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.