Puis-je écrire des fichiers avec HTML5/JS?

je me demande s'il y a un moyen que je puisse écrire aux fichiers à partir de HTML5/JS? Dans le navigateur ...

21
demandé sur Jiew Meng 2010-11-30 05:16:36

6 réponses

Oui, en utilisant la nouvelle API FileWriter.

http://www.w3.org/TR/file-writer-api/

Vous pouvez voir la prise en charge du navigateur ici: http://caniuse.com/#feat=filesystem

20
répondu mike 2013-05-14 12:02:26

en supposant que votre objectif final est de permettre à l'utilisateur de sauvegarder votre fichier quelque part où il le trouvera, comme en cliquant avec le bouton droit d'un lien et en choisissant "Enregistrer sous"...", il n'y a pas encore de couverture étendue pour ces API, probablement en raison de considérations de sécurité.

Ce que vous pouvez faire, cependant – Api ou pas – est cheesing avec un lien vers un data: uri avec un download attribut spécifiant le nom de fichier suggéré. Par exemple:

<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;">Save</a>

lorsque cliqué, au moins dans GoogleChrome, vous enregistrez un fichier contenant le texte mostly harmless (et une nouvelle ligne) comme earth.txt dans votre répertoire de téléchargement. Pour définir le contenu du fichier à partir de javascript à la place, appelez cette fonction en premier:

function setSaveFile(contents, file_name, mime_type) {
  var a = document.getElementById('save');
  mime_type = mime_type || 'application/octet-stream'; // text/html, image/png, et c
  if (file_name) a.setAttribute('download', file_name);
  a.href = 'data:'+ mime_type +';base64,'+ btoa(contents || '');
}
24
répondu ecmanaut 2013-01-27 06:05:41

Oui, il est possible de lire et écrire des fichiers à l'aide de HTML5+JS.

Lien pour vous aider: Explorer L'API du système de fichiers

j'ai également écrit un article tout à l'heure pour SpeckyBoy sur le même sujet que vous pourriez trouver utiles - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

3
répondu Pankaj Parashar 2014-07-16 14:15:21

autant que je sache, vous ne pouvez pas écrire dans les fichiers de HTML5, parce que donner accès à une page web aux fichiers de l'utilisateur serait un risque de sécurité.

si vous avez juste besoin de stocker quelques données pour que votre page puisse y accéder plus tard, HTML5 a quelque chose appelé le stockage Web qui peut faire cela.

ou vous pouvez stocker les données dans des cookies (si c'est très petit) ou sur le serveur.

1
répondu Angus 2010-11-30 02:20:29

une autre possibilité est d'envisager de créer quelque chose comme une application ClickOnce dans la plate-forme Windows. Cela présenterait un lien vers un exécutable téléchargeable qui fonctionnerait dans le système D'exploitation de l'utilisateur mais pourrait faire des callbacks web pour envoyer et récupérer des données. L'application ClickOnce pourrait intégrer une commande de navigateur et donc vous auriez à la fois une application compatible avec le web avec la capacité de parler directement au stockage de l'utilisateur.

1
répondu Wade 2016-06-29 18:02:39
  • êtes-vous d'accord avec le fait que la prise en charge d'une telle capacité n'existe actuellement que dans les navigateurs à base de Chrome (Chrome & Opera)?
  • êtes-vous d'accord avec l'utilisation d'une API propriétaire as-of-now pour profiter d'une telle capbilité?
  • êtes-vous d'accord avec la possibilité de supprimer ladite API à l'avenir?
  • êtes-vous d'accord avec la constriction de fichiers créés avec ladite API à un sandbox (un endroit à l'extérieur duquel les fichiers ne peuvent produire aucun effet) sur le disque?

Si vous avez répondu "oui" à toutes ces questions, alors oui, avec le FileWriter et système de fichiers APIs, vous pouvez écrire des fichiers à partir du contexte d'un onglet/fenêtre de navigateur en utilisant Javascript.

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Avec BakedGoods*, une bibliothèque Javascript qui établit une interface uniforme qui peut être utilisée pour effectuer des opérations de stockage communes dans tous les systèmes de fichiers natifs (y compris), et certaines installations de stockage non natives, ce qui est accompli avec ceci:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", type: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

la spécification du système de fichiers ne définit aucune ligne directrice sur la façon dont les structures de répertoires doivent apparaître sur le disque. Dans les navigateurs à base de chrome par exemple, le bac à sable a un système de fichiers virtuel (une structure de répertoire qui n'existe pas nécessairement sur le disque sous la même forme que lorsqu'il est accédé à partir de l'intérieur du navigateur), à l'intérieur de laquelle les répertoires et les fichiers créés avec les API sont placés.

donc même si vous pouvez écrire des fichiers dans un système avec L'API, localiser les fichiers sans L'API (et bien, sans L'API du système de fichiers) pourrait être une affaire non triviale.

*BakedGoods est maintenu par rien d'autre que ce gars juste ici :)

1
répondu Kevin 2016-07-07 00:27:32