J'ai joué avec WebGL ces derniers temps et j'ai réussi à faire fonctionner un lecteur Collada. Le problème est qu'il est assez lent (Collada est un format très détaillé), donc je vais commencer à convertir des fichiers dans un format plus facile à utiliser (probablement JSON). J'ai déjà le code pour analyser le fichier en JavaScript, je peux donc aussi bien l'utiliser que mon exportateur! Le problème est la sauvegarde.

Maintenant, je sais que je peux analyser le fichier, envoyer le résultat au serveur et que le navigateur demande le fichier au serveur en téléchargement. Mais en réalité, le serveur n'a rien à voir avec ce processus particulier, alors pourquoi l'impliquer? J'ai déjà le contenu du fichier souhaité en mémoire. Existe-t-il un moyen de présenter à l'utilisateur un téléchargement à l'aide de JavaScript pur? (J'en doute, mais autant demander ...)

Et pour être clair: je n'essaie pas d'accéder au système de fichiers à l'insu des utilisateurs! L'utilisateur fournira un fichier (probablement par glisser-déposer), le script transformera le fichier en mémoire et l'utilisateur sera invité à télécharger le résultat. Toutes ces activités devraient être des activités «sûres» en ce qui concerne le navigateur.

[EDIT]: Je ne l'ai pas mentionné d'avance, donc les affiches qui ont répondu "Flash" sont suffisamment valides, mais une partie de ce que je fais est une tentative de mettre en évidence ce qui peut être fait avec du HTML5 pur ... alors Flash est dans mon cas. (Bien que ce soit une réponse parfaitement valable pour quiconque fait une "vraie" application web.) Cela étant, il semble que je n'ai pas de chance, sauf si je veux impliquer le serveur. Merci quand même!

OK, création de données: l'URI fait définitivement l'affaire pour moi, grâce à Matthew et Dennkster qui ont souligné cette option! Voici essentiellement comment je le fais:

1) obtenir tout le contenu dans une chaîne appelée "contenu" (par exemple en le créant initialement ou en lisant innerHTML de la balise d'une page déjà construite).

2) Créez l'URI de données:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Il y aura des limitations de longueur en fonction du type de navigateur, etc., mais par exemple Firefox 3.6.12 fonctionne jusqu'à au moins 256k. Le codage en Base64 à la place à l'aide d'encodeURIComponent pourrait rendre les choses plus efficaces, mais pour moi, c'était ok.

3) ouvrir une nouvelle fenêtre et la "rediriger" vers cet URI vous invite à indiquer l'emplacement de téléchargement de ma page générée par JavaScript:

newWindow = window.open(uriContent, 'neuesDokument');

C'est tout.

Solution simple pour les navigateurs compatibles HTML5 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

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

Usage

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

HTML5 a défini une window.saveAs(blob, filename)méthode. Il n'est actuellement pris en charge par aucun navigateur. Mais il existe une bibliothèque de compatibilité appelée FileSaver.js qui ajoute cette fonction à la plupart des navigateurs modernes (y compris Internet Explorer 10+). Internet Explorer 10 prend en charge une navigator.msSaveBlob(blob, filename)méthode ( MSDN ), qui est utilisée dans FileSaver.js pour la prise en charge d'Internet Explorer.

J'ai écrit un article de blog avec plus de détails sur ce problème.

Enregistrement de fichiers volumineux

Les URI de données longues peuvent entraîner des problèmes de performances dans les navigateurs. Une autre option pour enregistrer les fichiers générés côté client consiste à placer leur contenu dans un objet Blob (ou fichier) et à créer un lien de téléchargement à l'aide de URL.createObjectURL(blob). Cela renvoie une URL qui peut être utilisée pour récupérer le contenu du blob. Le blob est stocké dans le navigateur jusqu'à ce que soit URL.revokeObjectURL()appelé sur l'URL ou que le document qui l'a créé soit fermé. La plupart des navigateurs Web prennent en charge les URL d'objet , Opera Mini est le seul qui ne les prend pas en charge.

Forcer un téléchargement

Si les données sont du texte ou une image, le navigateur peut ouvrir le fichier au lieu de l'enregistrer sur le disque. Pour provoquer le téléchargement du fichier en cliquant sur le lien, vous pouvez utiliser ledownload attribut. Cependant, tous les navigateurs Web ne prennent pas en charge l'attribut de téléchargement . Une autre option consiste à utiliser application/octet-streamcomme type mime du fichier, mais cela entraîne la présentation du fichier comme un blob binaire qui est particulièrement peu convivial si vous ne spécifiez pas ou ne pouvez pas spécifier un nom de fichier. Voir aussi ' Forcer à ouvrir la fenêtre contextuelle "Enregistrer sous ..." ouverte au lien texte, cliquez pour le pdf en HTML '.

Spécification d'un nom de fichier

Si le blob est créé avec le constructeur de fichiers, vous pouvez également définir un nom de fichier, mais seuls quelques navigateurs Web (y compris Chrome et Firefox) prennent en charge le constructeur de fichiers . Le nom de fichier peut également être spécifié comme argument dudownload attribut, mais cela est soumis à une tonne de considérations de sécurité . Internet Explorer 10 et 11 fournit sa propre méthode, msSaveBlob , pour spécifier un nom de fichier.

Exemple de code

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Jetez un oeil à Doug Neiner Downloadify qui est une interface JavaScript basé sur Flash pour ce faire.

Downloadify est une minuscule bibliothèque JavaScript + Flash qui permet de générer et d'enregistrer des fichiers à la volée, dans le navigateur, sans interaction avec le serveur.

Solution simple!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Fonctionne dans tous les navigateurs modernes.

Vous pouvez générer un URI de données . Cependant, il existe des limitations spécifiques au navigateur.

J'ai utilisé FileSaver ( https://github.com/eligrey/FileSaver.js ) et cela fonctionne très bien.
Par exemple, j'ai fait cette fonction pour exporter les journaux affichés sur une page.
Vous devez passer un tableau pour l'instanciation du Blob, donc je n'ai peut-être pas écrit cela correctement, mais cela fonctionne pour moi.
Au cas où, soyez prudent avec le remplacement: c'est la syntaxe pour rendre cela global, sinon il ne remplacera que le premier qu'il rencontre.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

J'ai trouvé deux approches simples qui fonctionnent pour moi. Tout d'abord, en utilisant un aélément déjà cliqué et en injectant les données de téléchargement. Et deuxièmement, générer un aélément avec les données de téléchargement, les exécuter a.click()et les supprimer à nouveau. Mais la deuxième approche ne fonctionne que si elle est également invoquée par une action de clic d'un utilisateur. (Certains) Blocage click()du navigateur provenant d'autres contextes comme lors du chargement ou déclenché après un délai d'attente (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Voici un lien vers la méthode URI de données suggérée par Mathew, cela a fonctionné sur safari, mais pas bien parce que je n'ai pas pu définir le type de fichier, il est enregistré comme "inconnu" et ensuite je dois y retourner plus tard et le changer dans l'ordre pour visualiser le fichier ...

http://www.nihilogic.dk/labs/canvas2image/

Vous pouvez utiliser localStorage. Il s'agit de l'équivalent Html5 des cookies. Il semble fonctionner sur Chrome et Firefox MAIS sur Firefox, je devais le télécharger sur un serveur. Autrement dit, les tests directement sur mon ordinateur personnel n'ont pas fonctionné.

Je travaille sur des exemples HTML5. Accédez à http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html et faites défiler jusqu'au labyrinthe. Les informations pour reconstruire le labyrinthe sont stockées à l'aide de localStorage.

Je suis venu à cet article à la recherche de JavaScript HTML5 pour charger et travailler avec des fichiers xml. Est-ce la même chose que les anciens HTML et JavaScript ????

essayer

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Si vous souhaitez télécharger des données binaires, regardez ici

Mettre à jour

2020.06.14 J'ai mis à niveau Chrome vers 83.0 et au-dessus de l'arrêt de l'extrait de code SO (en raison des restrictions de sécurité du sandbox ) - mais la version JSFiddle fonctionne - ici

Comme mentionné précédemment, l' API File , ainsi que les API FileWriter et FileSystem peuvent être utilisées pour stocker des fichiers sur la machine d'un client à partir du contexte d'un onglet / d'une fenêtre de navigateur.

Cependant, il y a plusieurs choses concernant les deux dernières API que vous devez connaître:

• Les implémentations des API n'existent actuellement que dans les navigateurs basés sur Chromium (Chrome et Opera)
• Les deux API ont été retirées de la voie des normes W3C le 24 avril 2014 et sont désormais propriétaires
• La suppression des API (désormais propriétaires) des navigateurs d'implémentation à l'avenir est une possibilité
• Un bac à sable (un emplacement sur le disque en dehors duquel les fichiers ne peuvent produire aucun effet) est utilisé pour stocker les fichiers créés avec les API
• Un système de fichiers virtuel (une structure de répertoires qui n’existe pas nécessairement sur le disque sous la même forme que lorsqu’il est accessible depuis le navigateur) est utilisé pour représenter les fichiers créés avec les API

Voici des exemples simples de la façon dont les API sont utilisées, directement et indirectement, en tandem pour ce faire:

BakedGoods *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Utilisation des API File, FileWriter et FileSystem brutes

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);

Bien que les API FileSystem et FileWriter ne soient plus sur la voie des normes, leur utilisation peut être justifiée dans certains cas, à mon avis, parce que:

• Le regain d'intérêt des fournisseurs de navigateurs non implémentés peut les replacer directement dessus
• La pénétration du marché des navigateurs d'implémentation (basés sur le chrome) est élevée
• Google (le principal contributeur de Chromium) n'a pas donné de date de fin de vie aux API

Toutefois, vous devez décider si "certains cas" englobent les vôtres.

* BakedGoods est maintenu par nul autre que ce gars ici :)

Ce fil était inestimable pour comprendre comment générer un fichier binaire et inviter à télécharger le fichier nommé, le tout en code client sans serveur.

La première étape pour moi a été de générer le blob binaire à partir des données que je sauvegardais. Il y a beaucoup d'exemples pour le faire pour un seul type binaire, dans mon cas, j'ai un format binaire avec plusieurs types que vous pouvez passer comme un tableau pour créer le blob.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

L'étape suivante consiste à demander au navigateur d'inviter l'utilisateur à télécharger ce blob avec un nom prédéfini.

Tout ce dont j'avais besoin était un lien nommé que j'ai ajouté dans le HTML5 que je pouvais réutiliser pour renommer le nom de fichier initial. Je l'ai gardé caché car le lien n'a pas besoin d'être affiché.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

La dernière étape consiste à inviter l'utilisateur à télécharger le fichier.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

Voici un tutoriel pour exporter des fichiers au format ZIP:

Avant de commencer, il existe une bibliothèque pour enregistrer les fichiers, le nom de la bibliothèque est fileSaver.js, vous pouvez trouver cette bibliothèque ici. Commençons, incluons maintenant les bibliothèques requises:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Copiez maintenant ce code et ce code téléchargera un fichier zip avec un fichier hello.txt ayant un contenu Hello World. Si tout fonctionne correctement, cela téléchargera un fichier.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Cela va télécharger un fichier appelé file.zip. Vous pouvez en savoir plus ici: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library