Utilizzo di HTML5 / Javascript per generare e salvare un file

Recentemente mi sono occupato di WebGL e ho ottenuto un lettore Collada al lavoro. 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). Il fatto è che ho già il codice per analizzare il file in Javascript, quindi posso anche usarlo come mio esportatore! Il problema è il risparmio.

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à il contenuto del file desiderato in memoria. C’è un modo che potrei presentare all’utente con un download utilizzando puro javascript? (Ne dubito, ma potrebbe anche chiedere …)

E per essere chiari: non sto cercando di accedere al filesystem senza la conoscenza degli utenti! L’utente fornirà un file (probabilmente tramite trascinamento della selezione), lo script trasformsrà il file in memoria e all’utente verrà richiesto di scaricare il risultato. Tutto ciò dovrebbe essere attività “sicure” per quanto riguarda il browser.

[EDIT]: non l’ho menzionato in anticipo, quindi i poster che hanno risposto a “Flash” sono abbastanza validi, ma una parte di ciò che sto facendo è un tentativo di evidenziare ciò che può essere fatto con puro HTML5 … quindi Flash è giusto nel mio caso. (Anche se è una risposta perfettamente valida per chiunque stia facendo una “vera” web app.) In questo caso sembra che io sia sfortunato a meno che non voglia coinvolgere il server. Grazie comunque!

OK, creando un dato: l’URI sicuramente fa il trucco per me, grazie a Matthew e Dennkster che indicano questa opzione! Ecco fondamentalmente come lo faccio:

1) ottenere tutto il contenuto in una stringa chiamata “contenuto” (ad es. Creandola lì inizialmente o leggendo innerHTML del tag di una pagina già costruita).

2) Costruisci l’URI di 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 di usare encodeURIComponent potrebbe rendere le cose più efficienti, ma per me era ok.

3) apri una nuova finestra e “reindirizza” a questo prompt URI per un percorso di download della mia pagina generata da JavaScript:

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

Questo è tutto.

Soluzione semplice per browser HTML5 pronti …

 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 metodo window.saveAs(blob, filename) . Al momento non è supportato da alcun browser. Ma esiste una libreria di compatibilità chiamata FileSaver.js che aggiunge questa funzione ai browser più moderni (incluso Internet Explorer 10+). Internet Explorer 10 supporta un metodo navigator.msSaveBlob(blob, filename) ( MSDN ), che viene 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

URI di dati lunghi possono dare problemi di prestazioni nei browser. Un’altra opzione per salvare i file generati sul lato client consiste nel mettere il loro contenuto in un object Blob (o File) e creare un collegamento per il download utilizzando URL.createObjectURL(blob) . Ciò restituisce un URL che può essere utilizzato per recuperare il contenuto del BLOB. Il blob viene memorizzato all’interno del browser fino a quando URL.revokeObjectURL() viene chiamato sull’URL o il documento che lo ha creato viene chiuso. La maggior parte dei browser Web supporta gli URL degli oggetti , Opera Mini è l’unica che non li supporta.

Forzare un download

Se i dati sono di 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, è ansible utilizzare l’attributo download . Tuttavia, non tutti i browser Web supportano l’attributo download . Un’altra opzione è usare application/octet-stream come mime-type del file, ma questo fa sì che il file venga presentato come un blob binario che è particolarmente user-unfriendly se non si specifica o non si può specificare un nome file. Vedi anche ” Forza per aprire” Salva con nome … “popup aperto al link di testo clicca per pdf in HTML “.

Specifica di un nome file

Se il blob viene creato con il costruttore File, è anche ansible impostare un nome file, ma solo alcuni browser Web (incluso Chrome e Firefox) supportano il costruttore File . Il nome file può anche essere specificato come argomento dell’attributo download , ma questo è sobject a un sacco di 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; 
 Download 
 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!

 Click here 

Funziona con tutti i browser moderni (vedi DEMO ).

ps href può essere impostato anche con Javascript:
'data:application/octet-stream,' + encodeURIComponent(content);

È ansible generare un URI di dati . Tuttavia, esistono limitazioni specifiche del browser.

Ho usato FileSaver ( https://github.com/eligrey/FileSaver.js ) e funziona bene.
Ad esempio, ho eseguito 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.
Nel caso, fai attenzione alla sostituzione: questa è la syntax per rendere globale questo, altrimenti sostituirà solo il primo che incontra.

 exportLogs : function(){ var array = new Array(); var str = $('#logs').html(); array[0] = str.replace(/
/g, '\n\t'); var blob = new Blob(array, {type: "text/plain;charset=utf-8"}); saveAs(blob, "example.log"); }

Ho trovato due approcci semplici che funzionano per me. Innanzitutto, utilizzando un elemento già fatto clic e iniettando i dati di download. E in secondo luogo, generando un elemento con i dati di download, eseguendo a.click() e rimuovendolo di nuovo. Ma il secondo approccio funziona solo se invocato da un’azione di clic dell’utente. (Alcuni) Browser click() da altri contesti come il caricamento o l’triggerszione dopo un timeout (setTimeout).

        download    

Ecco un link al metodo URI di dati suggerito da Mathew, ha funzionato su Safari, ma non bene perché non ho potuto impostare il tipo di file, viene salvato come “sconosciuto” e quindi devo andare di nuovo lì in seguito e cambiarlo in ordine per vedere il file …

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

È ansible utilizzare localStorage. Questo è l’equivalente Html5 dei cookie. Sembra funzionare su Chrome e Firefox, ma su Firefox, ho dovuto caricarlo su un server. Cioè, testare direttamente sul mio computer di casa non ha funzionato.

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

Sono arrivato a questo articolo cercando JavaScript HTML5 per caricare e lavorare con i file xml. È lo stesso dei vecchi html e JavaScript ????

Come accennato in precedenza, l’API File , insieme alle API FileWriter e FileSystem, può essere utilizzata per archiviare i file sulla macchina di un cliente 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 esistono attualmente solo nei browser basati su Chromium (Chrome & Opera)
  • Entrambe le API sono state rimosse dal tracciato degli standard W3C il 24 aprile 2014 e sin d’ora sono proprietarie
  • La rimozione delle API (ora proprietarie) dall’implementazione dei browser in futuro è una possibilità
  • Una sandbox (una posizione su disco al di fuori dei quali 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 in cui si accede quando si accede dal browser) viene utilizzato rappresenta i file creati con le API

Ecco alcuni semplici esempi di come le API vengono utilizzate, direttamente e indirettamente, in tandem per fare ciò:

BakedGoods *

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

Utilizzo delle API raw File, FileWriter e FileSystem

 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 traccia degli standard, il loro utilizzo può essere giustificato in alcuni casi, a mio parere, perché:

  • Il rinnovato interesse da parte dei fornitori di browser non implementati potrebbe reinserirli nuovamente
  • La penetrazione del mercato dei browser di implementazione (basati su Chromium) è elevata
  • Google (il principale contributore a Chromium) non ha dato e data di fine vita alle API

Tuttavia, se “alcuni casi” comprendono il tuo, è compito tuo decidere.

* BakedGoods è gestito da nientemeno che questo ragazzo proprio qui 🙂

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. Iniziamo, Ora, includi le librerie richieste:

   

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.

  

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