HTML5 JavaScript attributo download

Ho lavorato a un progetto per un paio di mesi e mi sto avvicinando alla fine. Uno degli ultimi passi è quello di fornire un file che sarà riempito con informazioni che sono state generate da azioni dell'utente durante la loro sessione. Can I write files with HTML5/JS? e la risposta di ecmanaut mi ha avvicinato molto da quando ha fornito due metodi per farlo, uno in puro html5 e uno con JavaScript.HTML5 JavaScript attributo download

Inizialmente avevo utilizzato il metodo JavaScript che funzionava solo in Chrome, non in Mozilla o IE. Così ho usato il puro metodo html5 combinato con qualche altro JavaScript per incollarlo sulla pagina, quindi era cliccabile.

document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;and a bit more">Save</a>';

Questo codice crea un file che viene scaricato, ma non contiene il ritorno a capo, che l'articolo ha detto è stato ' '. Così ho fatto una ricerca per vedere quali altri codici carattere potrebbero essere riconosciuti. http://en.wikipedia.org/wiki/Newline mi ha fornito molte possibili scelte, nessuna delle quali ho provato ha funzionato. Quelli che ho provato sono: '& # 10', ' ', '& # 13', ' ', '\ r \ n', '\ r', '\ n', '\ cr', ' \ c \ r ', 0x0D, 0x0A, 0c0D0A. In molti casi il newline è stato rimosso e non appare nulla.

Durante il test del codice precedente, funziona in Mozilla e Chrome (meno la nuova riga), ma il risultato in IE è diverso. Quando fai clic sul link Salva, in realtà si sposta sulla pagina e ha l'url come i contenuti dei dati.

Mentre il progetto potrebbe essere accettabile senza questa funzione, mi piacerebbe molto farlo funzionare dopo aver trascorso così tanto tempo e sforzi su di esso ed essersi avvicinato così. Ho anche bisogno di testare questo in Safari, ma non ho ancora fatto alcun test in quel browser. Il supporto del browser richiesto dal più importante al minimo è il seguente: Mozilla, Chrome, Safari, IE. Se possibile, vorrei evitare la codifica specifica del browser.

Vorrei anche ricordare che, come nel primo collegamento, non voglio inviare a un server il download, ho bisogno che funzioni localmente sul lato client senza interazione con il server.

Quindi, per riassumere, ho bisogno di almeno che la nuova riga funzioni per il file in modo che Mozilla e Chrome funzionino entrambi perfettamente. E se possibile, un modo per far funzionare il file anche in IE.

Modifica: Nov 3, 2014 1:40 pm Ora locale Ho provato la modifica suggerita da maths4js su come modificare le mie quotazioni e il suggerimento non ha funzionato. Mi è venuto in mente che presentare una pagina di esempio più ampia di codice sarebbe stata un'idea utile. È stato anche suggerito che io guardassi per vedere quali browser supportano questa funzione http://caniuse.com/#feat=download e sembra che IE e Safari non lo fanno, quindi non mi preoccuperò di loro al momento e forse lungo la strada ho codice specifico del browser per loro.

<!DOCTYPE HTML> 
<html> 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style>body{margin: 0px;padding: 0px;}</style></head><body><center><br><div id='download'></div></center> 
<script> 
function download(){ 
//var newline= '&#10'; //no line breaks 
//var newline= '&#10;'; //no line breaks 
//var newline= "&#10;"; //no line breaks 
//var newline= "&#10";   //no line breaks 
//var newline= "\r\n";  //no line breaks 
//var newline= "\r\n;";  //appends ; but no line breaks 
//var newline = '\n';  //no line break 
//var newline = '/n'; //completely failed 
var newline = 0x0D0A; 
var tab = "  "; 
var text = "Title of the document" + newline; 
text += "Just a line of text : "; 
text = text +"Random"; 
text = text + newline + "Trial" + tab + "Time" + tab + "Correct" + newline; 
//document.getElementById('download').innerHTML = '<a id="save" download="This_File.txt" href="data:text/plain,'+text+'">Save</a>'; 
//document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;and a bit more">Save</a>'; 
document.getElementById('download').innerHTML = "<a id='save' download='earth.txt' href='data:text/plain,mostly harmless&#10;and a bit more'>Save</a>"; 
} 
download(); 

</script> 
</body> 
</html>

Vorrei ringraziare tutti voi per lo sforzo e il tempo che mi avete già dato.

fonte

2014-11-03 Daniel Watt

la soluzione html5 funzionerà ovviamente solo nei browser che supportano l'attributo download. –

Provare a convertire il testo in base64 utilizzando la finestra.Funzione btoa:

var myText = btoa('mostly harmless\n\rand a bit more'); 
 
document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain;base64,' + myText + '">Save</a>';

<div id="download"></div>

dovrebbe funzionare, come Base64 codifica correttamente/mantiene il carattere di nuova riga.

fonte

2014-11-03 19:50:34

Questa soluzione era esattamente ciò che era necessario per questa applicazione, grazie mille. –

Una cosa da notare però - sappiate che l'output della funzione base64 potrebbe essere in realtà circa il 33% più grande della stringa originale. Non penso che avrà un impatto enorme sulle prestazioni finché non cercherete di creare file veramente grandi (come, megabyte di testo), ma vale la pena di ricordare, credo. –

Grazie Michal, è bello saperlo, ma in questo caso non è una preoccupazione. La dimensione del file prevista non dovrebbe mai superare 15 righe. –

Questo funziona per me, io uso "\ r \ n" per le nuove linee se utilizzato con il sistema di Windows, altrimenti \ n è abbastanza

var textToWrite = txt; //plain text with \r\n for new lines if used with Windows System, otherwise \n is enough 
var fileNameToSaveAs = session_title.innerText + '.txt'; //TODO: filename should be first 10chars of noweirdchrs(title)... 

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain;charset=utf-8'}); 

<a id='downloadLink_id'></a> 

downloadLink = document.getElementById('downloadLink_id'); 
downloadLink.download = fileNameToSaveAs; 
downloadLink.innerHTML = "Download File"; 
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);

vederlo in azione sul mio speech recognition chrome app - una delle esportazione opzioni per file txt o srt ...

fonte

2014-11-03 19:49:24

Dovrò provare questa soluzione più tardi (e spero che funzionerà per tutti e 4 i browser). Grazie per aver dedicato del tempo per postare questo. Sto commentandolo nel mio file in modo che non posso dimenticarlo. –

HTML5 JavaScript attributo download

risposta

Problemi correlati