2011-10-10 20 views
32

Sto lavorando su un editor di testo in puro Javascript. Mi piacerebbe che quando l'utente fa clic sul pulsante "Salva", l'editor scarica il file. Ho già avuto questa parte funziona:Salvare il file Javascript con nome file

uriContent = "data:application/octet-stream," + encodeURIComponent(codeMirror.getValue()); 
newWindow=window.open(uriContent, 'filename.txt'); 

I download di file, ma il problema è che il file è denominato 'download'.

Domanda: Come potrei cambiare il nome del file per essere tutto quello che voglio, per es filename.txt?

+0

@zzzzBov penso questa risposta è migliore di quella a cui si collega perché in realtà mostra una soluzione per il problema indicato. – Deviljho

+0

@ AdriánSalgado, che non fa questa domanda meno un duplicato, tuttavia quel voto ravvicinato si è verificato oltre 2 anni fa. Come puoi vedere, non c'era abbastanza supporto per chiudere effettivamente questa domanda. Se pensi che l'altra domanda debba avere una risposta migliore, ti consiglio di aggiungerne una. – zzzzBov

+0

Non sembra ancora una buona risposta! Credo che sia solo un piccolo buco nero nell'oggetto della finestra javascript! Ho la stessa preoccupazione: il mio codice aprirà il file al volo che contiene il report ma il nome del file non è quello che il mio codice definisce. Non dovrei richiedere all'utente di fare clic su un href e scaricare il file. –

risposta

23

Sostituisci il pulsante "Salva" con un collegamento di ancoraggio e imposta dinamicamente il nuovo attributo download. Opere in Chrome e Firefox:

var d = "ha"; 
$(this).attr("href", "data:image/png;base64,abcdefghijklmnop").attr("download", "file-" + d + ".png"); 

Ecco un esempio di lavoro con il nome impostato come la data corrente: http://jsfiddle.net/Qjvb3/

Ecco una tabella di compatibilità per download attributo: http://caniuse.com/download

+1

supporto del browser per gli attributi di download http://caniuse.com/#feat=download – jcubic

+0

Come sopra, nessun supporto per gli attributi di download in Safari e IE. – LT86

5

utilizzare la proprietà filename in questo modo:

uriContent = "data:application/octet-stream;filename=filename.txt," + 
       encodeURIComponent(codeMirror.getValue()); 
newWindow=window.open(uriContent, 'filename.txt'); 

EDIT:

A quanto pare, non v'è alcun modo affidabile per fare questo. Vedi: Is there any way to specify a suggested filename when using data: URI?

+0

Hmm, l'ho provato e continua a scaricare un file chiamato "download". Questo è esattamente il mio codice: 'uriContent =" dati: application/octet-stream; filename = filename.txt, "+ encodeURIComponent (codeMirror.getValue()); newWindow = window.open (uriContent, 'filename.txt'); ' – skimberk1

+2

Non sembra funzionare per il bit di test del browser che ho fatto in Firefox; è una funzionalità in un browser diverso? [Wikipedia menziona che gli URL dei dati non possono contenere nomi di file] (http://en.wikipedia.org/wiki/Data_URI_scheme#Disadvantages). – zzzzBov

+0

Hmm ok, bene grazie per la risposta comunque! – skimberk1

13
function saveAs(uri, filename) { 
    var link = document.createElement('a'); 
    if (typeof link.download === 'string') { 
     document.body.appendChild(link); // Firefox requires the link to be in the body 
     link.download = filename; 
     link.href = uri; 
     link.click(); 
     document.body.removeChild(link); // remove the link when done 
    } else { 
     location.replace(uri); 
    } 
} 
+0

Mi hai salvato la vita. Grazie –

Problemi correlati