Comment puis-je enregistrer des fichiers créés avec JavaScript dans le navigateur sans utiliser de serveur ?

Création et enregistrement de fichiers à l'aide de HTML5/JavaScript

La création et l'enregistrement de fichiers dans un navigateur Web sont une tâche courante, en particulier lorsqu'il s'agit de fichiers dynamiques. contenu. Bien qu'il soit possible d'impliquer le serveur dans ce processus, cela peut s'avérer inefficace si le rôle du serveur est minime. Cette question explore la possibilité d'utiliser du JavaScript pur pour faciliter l'enregistrement de fichiers dans un navigateur Web sans impliquer le serveur.

Le défi : enregistrer des fichiers en JavaScript

L'utilisateur a a développé un script qui analyse les fichiers Collada (un format de modèle 3D détaillé) dans un format JSON plus gérable. Le fichier analysé est stocké en mémoire et l'utilisateur souhaite lui fournir un moyen de télécharger le fichier transformé sans impliquer le serveur.

La solution : HTML5 Blob et attributs de téléchargement

La solution réside dans les attributs HTML5 Blob et Download. L'objet Blob nous permet de créer un objet de type fichier en mémoire, tandis que l'attribut Download de la balise nous permet de spécifier le nom du fichier et de lancer le téléchargement.

Voici un extrait de code qui démontre le processus. :

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

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Utilisation :

Pour utiliser la fonction de téléchargement, appelez-la simplement avec le nom de fichier et le texte souhaités à enregistrer. Par exemple :

download('test.txt', 'Hello world!');

Cela créera un fichier nommé "test.txt" sur l'ordinateur de l'utilisateur avec le texte "Hello world!" écrit dessus.

Compatibilité :

La fonction de téléchargement fonctionne dans les navigateurs modernes qui prennent en charge les attributs Blob et Download. Cela inclut :

• Chrome
• Firefox
• Safari
• Edge
• Opera

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!