Ultimamente ho avuto problemi con WebGL e ho fatto funzionare un lettore Collada. Il problema è che è piuttosto lento (Collada è un formato molto dettagliato), quindi inizierò a convertire i file in un formato più facile da usare (probabilmente JSON). Ho già il codice per analizzare il file in JavaScript, quindi posso usarlo anche come il mio esportatore! Il problema sta salvando.

Ora so che posso analizzare il file, inviare il risultato al server e fare in modo che il browser richieda il file dal server come download. Ma in realtà il server non ha nulla a che fare con questo particolare processo, quindi perché coinvolgerlo? Ho già in memoria il contenuto del file desiderato. Esiste un modo per presentare all'utente un download utilizzando JavaScript puro? (Ne dubito, ma potrei anche chiedere ...)

E per essere chiari: non sto provando ad accedere al filesystem all'insaputa dell'utente! L'utente fornirà un file (probabilmente tramite trascinamento della selezione), lo script trasformerà il file in memoria e all'utente verrà richiesto di scaricare il risultato. Tutte queste dovrebbero essere attività "sicure" per quanto riguarda il browser.

[EDIT]: non l'ho menzionato in anticipo, quindi i poster che hanno risposto "Flash" sono abbastanza validi, ma parte di quello che sto facendo è un tentativo di evidenziare cosa si può fare con HTML5 puro ... quindi Flash è nel mio caso. (Anche se è una risposta perfettamente valida per chiunque stia facendo una "vera" app web.) Stando così le cose sembra che io sia sfortunato a meno che non voglia coinvolgere il server. Grazie comunque!

OK, creando un dato: l'URI fa sicuramente il trucco per me, grazie a Matthew e Dennkster che sottolineano questa opzione! Ecco in pratica come lo faccio:

1) ottenere tutto il contenuto in una stringa chiamata "contenuto" (ad es. Creandolo inizialmente o leggendo innerHTML del tag di una pagina già costruita).

2) Crea l'URI dei dati:

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

Ci saranno limiti di lunghezza a seconda del tipo di browser ecc., Ma ad esempio Firefox 3.6.12 funziona fino ad almeno 256k. La codifica in Base64 invece usando encodeURIComponent potrebbe rendere le cose più efficienti, ma per me andava bene.

3) aprire una nuova finestra e "reindirizzarla" a questo URI richiede un percorso di download della mia pagina generata da JavaScript:

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

Questo è tutto.

Soluzione semplice per browser predisposti per 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();
    }
}

uso

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

HTML5 ha definito un window.saveAs(blob, filename)metodo. Al momento non è supportato da nessun browser. Ma esiste una libreria di compatibilità chiamata FileSaver.js che aggiunge questa funzione alla maggior parte dei browser moderni (incluso Internet Explorer 10+). Internet Explorer 10 supporta un navigator.msSaveBlob(blob, filename)metodo ( MSDN ), utilizzato in FileSaver.js per il supporto di Internet Explorer.

Ho scritto un post sul blog con maggiori dettagli su questo problema.

Salvataggio di file di grandi dimensioni

Gli URI con dati lunghi possono causare problemi di prestazioni nei browser. Un'altra opzione per salvare i file generati sul lato client è quella di mettere il loro contenuto in un oggetto BLOB (o File) e creare un collegamento per il download usando URL.createObjectURL(blob). Ciò restituisce un URL che può essere utilizzato per recuperare il contenuto del BLOB. Il BLOB viene archiviato nel browser fino a quando non URL.revokeObjectURL()viene chiamato l'URL o il documento che lo ha creato viene chiuso. La maggior parte dei browser Web supporta gli URL degli oggetti , Opera Mini è l'unico che non li supporta.

Forzare un download

Se i dati sono testo o un'immagine, il browser può aprire il file invece di salvarlo su disco. Per fare in modo che il file venga scaricato facendo clic sul collegamento, è possibile utilizzare l' downloadattributo. Tuttavia, non tutti i browser Web supportano l'attributo download . Un'altra opzione consiste nell'utilizzare application/octet-streamcome tipo mime del file, ma questo fa sì che il file venga presentato come un BLOB binario che è particolarmente ostile per l'utente se non si specifica o non è possibile specificare un nome file. Vedi anche ' Forza per aprire il popup "Salva con nome ..." apri al link di testo fai clic per il pdf in HTML '.

Specifica di un nome file

Se il BLOB viene creato con il costruttore File, è anche possibile impostare un nome file, ma solo alcuni browser Web (inclusi Chrome e Firefox) supportano il costruttore File . Il nome file può anche essere specificato come argomento downloaddell'attributo, ma questo è soggetto a molte considerazioni sulla sicurezza . Internet Explorer 10 e 11 fornisce il proprio metodo, msSaveBlob , per specificare un nome file.

Codice di esempio

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

Dai un'occhiata a Downloadify di Doug Neiner che è un'interfaccia JavaScript basata su Flash per farlo.

Downloadify è una piccola libreria JavaScript + Flash che consente la generazione e il salvataggio di file al volo, nel browser, senza interazione con il server.

Soluzione semplice!

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

Funziona con tutti i browser moderni.

È possibile generare un URI di dati . Tuttavia, ci sono limitazioni specifiche del browser.

Ho usato FileSaver ( https://github.com/eligrey/FileSaver.js ) e funziona perfettamente.
Ad esempio, ho fatto questa funzione per esportare i registri visualizzati su una pagina.
Devi passare un array per l'installazione del BLOB, quindi forse non l'ho scritto nel modo giusto, ma funziona per me.
Per ogni evenienza, fai attenzione con il sostituto: questa è la sintassi per rendere questo globale, altrimenti sostituirà solo il primo che incontra.

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

Ho trovato due semplici approcci che funzionano per me. Innanzitutto, utilizzando un aelemento già cliccato e iniettando i dati di download. E in secondo luogo, generare un aelemento con i dati di download, eseguirlo a.click()e rimuoverlo di nuovo. Ma il secondo approccio funziona solo se invocato anche da un'azione di clic dell'utente. (Alcuni) Blocco del browser click()da altri contesti come durante il caricamento o attivato dopo un timeout (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>

Ecco un link al metodo URI di dati suggerito da Mathew, ha funzionato su Safari, ma non bene perché non sono riuscito a impostare il tipo di file, viene salvato come "sconosciuto" e quindi devo andarci di nuovo più tardi e cambiarlo in ordine per visualizzare il file ...

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

È possibile utilizzare localStorage. Questo è l'equivalente Html5 dei cookie. Sembra funzionare su Chrome e Firefox MA su Firefox, dovevo caricarlo su un server. Cioè, il test direttamente sul mio computer di casa non ha funzionato.

Sto lavorando su esempi HTML5. Vai su http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html e scorri fino a quello del labirinto. Le informazioni per ricostruire il labirinto sono archiviate usando localStorage.

Sono venuto a questo articolo alla ricerca di JavaScript HTML5 per il caricamento e l'utilizzo di file XML. È lo stesso del vecchio html e JavaScript ????

provare

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

Se vuoi scaricare dati binari guarda qui

Aggiornare

2020.06.14 Eseguo l'aggiornamento di Chrome alla versione 83.0 e successive SO stop snippet funziona (a causa delle restrizioni di sicurezza sandbox ) - ma la versione di JSFiddle funziona - qui

Come accennato in precedenza, l' API File , insieme a FileWriter e FileSystem API possono essere utilizzate per archiviare file sul computer di un client dal contesto di una scheda / finestra del browser.

Tuttavia, ci sono diverse cose relative alle ultime due API di cui dovresti essere a conoscenza:

• Le implementazioni delle API attualmente esistono solo nei browser basati su Chromium (Chrome e Opera)
• Entrambe le API sono state tolte dal tracciato degli standard W3C il 24 aprile 2014 e finora sono proprietarie
• La rimozione delle API (ora proprietarie) dall'implementazione dei browser in futuro è una possibilità
• Una sandbox (una posizione sul disco al di fuori della quale i file non possono produrre alcun effetto) viene utilizzata per archiviare i file creati con le API
• Un file system virtuale (una struttura di directory che non esiste necessariamente sul disco nella stessa forma che fa quando vi si accede dall'interno del browser) rappresenta i file creati con le API

Ecco alcuni semplici esempi di come le API vengono utilizzate, direttamente e indirettamente, insieme a questo:

BakedGoods *

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

Utilizzo delle API File, FileWriter e FileSystem non elaborate

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

Sebbene le API FileSystem e FileWriter non siano più sulla buona strada degli standard, il loro uso può essere giustificato in alcuni casi, secondo me, perché:

• L'interesse rinnovato da parte dei fornitori di browser non implementati potrebbe reinserirli
• La penetrazione nel mercato dell'implementazione di browser (basati su Chromium) è elevata
• Google (il principale collaboratore di Chromium) non ha dato e data di fine vita alle API

Se "alcuni casi" comprende i tuoi, tuttavia, spetta a te decidere.

* BakedGoods è gestito solo da questo ragazzo qui :)

Questo thread è stato prezioso per capire come generare un file binario e richiedere di scaricare il file indicato, tutto nel codice client senza un server.

Il primo passo per me è stato generare il BLOB binario dai dati che stavo salvando. Ci sono molti esempi per farlo per un singolo tipo binario, nel mio caso ho un formato binario con più tipi che puoi passare come un array per creare il 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;
}

Il passaggio successivo consiste nel chiedere al browser di richiedere all'utente di scaricare questo BLOB con un nome predefinito.

Tutto ciò di cui avevo bisogno era un link con nome che ho aggiunto in HTML5 e che potevo riutilizzare per rinominare il nome file iniziale. L'ho tenuto nascosto poiché non è necessario visualizzare il collegamento.

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

L'ultimo passaggio è richiedere all'utente di scaricare il file.

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

Ecco un tutorial per esportare file come ZIP:

Prima di iniziare, c'è una libreria per salvare i file, il nome della libreria è fileSaver.js, puoi trovare questa libreria qui. Cominciamo, ora, includiamo le librerie richieste:

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

Ora copia questo codice e questo codice scaricherà un file zip con un file hello.txt con contenuto Hello World. Se tutto funziona correttamente, questo scaricherà un file.

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

Questo scaricherà un file chiamato file.zip. Puoi leggere di più qui: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library