27

Vorrei sapere se posso creare un file di testo e salvare il file nella sezione "Download" degli utenti sul suo computer usando javascript. Il modo in cui la mia funzione dovrebbe funzionare è quando l'utente fa clic sul pulsante di invio, compilo le informazioni degli utenti nel file di testo e poi lo salva nella sua macchina. Mi piacerebbe che funzionasse su google chrome.creare un file utilizzando javascript in chrome sul lato client

È possibile? Ho visto post che specificatamente mi dicono che si tratta di un serio problema di sicurezza.

+0

http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for- User-to-download-not-through-server – Prospero

+1

ho guardato a quello. ma non ho capito come posso popolare il file basato sulla voce degli utenti. – Praveen

+2

Ha anche chiesto specificamente su Chrome. – Prospero

risposta

37

Certo che puoi, utilizzando le nuovissime API: http://jsfiddle.net/4D92b/88/.

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 

window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { 
    fs.root.getFile('test.bin', {create: true}, function(fileEntry) { // test.bin is filename 
     fileEntry.createWriter(function(fileWriter) { 
      var arr = new Uint8Array(3); // data length 

      arr[0] = 97; // byte data; these are codes for 'abc' 
      arr[1] = 98; 
      arr[2] = 99; 

      var blob = new Blob([arr]); 

      fileWriter.addEventListener("writeend", function() { 
       // navigate to file, will download 
       location.href = fileEntry.toURL(); 
      }, false); 

      fileWriter.write(blob); 
     }, function() {}); 
    }, function() {}); 
}, function() {}); 
+0

wow. questo è bello – naveen

+1

quando ho provato a eseguire questo codice, sono stato indirizzato a un link localmente. non aveva contenuti in esso. Volevo un file di testo quindi ho cambiato il nome e ho seguito le istruzioni su http://www.html5rocks.com/en/tutorials/file/filesystem/ – Praveen

+0

@Praveen: mi sono perso alcune cose. Si prega di consultare il mio codice aggiornato. Il nuovo violino funziona correttamente? – pimvdb

0

No, in quanto ciò consentirebbe di creare programmi dannosi nel computer del client e danneggiare la sua privacy.

Inoltre, le richieste di download dei file provengono dal server, quindi sarà necessario creare il file sul server e servirlo all'utente, e sperare che lo salvi (se lo ha richiesto è probabile che lo farà).

Un'altra possibile soluzione da guardare è quello di utilizzare URI dati o CSV, ma il supporto del browser per loro è incompleta (IE), vedi Create a file in memory for user to download, not through server

+1

+1. @downvoter: clicca felice? – naveen

+0

Penso di sì: o qualunque sia lo –

0

Avrete bisogno di funzionalità lato server per server all'utente un file di testo (javascript non è abbastanza). È possibile creare uno script lato server che crea il file e utilizzare javascript per richiedere all'utente di salvarlo.

0

On Pulsante Invia dall'utente, è possibile creare file sul server e reindirizzare l'utente all'URL del file, da dove dovrebbe essere scaricato automaticamente.

+0

scaricato automaticamente? Dice chi? –

+0

intendo al server, dopo aver salvato il file sul server e reindirizzato l'utente all'URL che punta al file (www.domain.com/abc.txt), chiederà automaticamente all'utente di salvare il file sul lato client ... – vicky

11

Inserire questo nel browser Chrome

data:text;charset=utf-8,helloWorld 

Quindi, per costruire il download per gli utenti si farebbe qualcosa di simile

data='<a href='data:text;charset=utf-8,'+uriEncode(yourUSERdataToDownload)+' >Your Download</a>

Poi iniettarlo nel DOM per la vostra utente da premere.

+1

+1 perché è tutto molto bello. –

+0

Haha Ty è quello che ho pensato quando l'ho trovato =) – Prospero

+0

come andresti sull'impostazione del nome file del file scaricato? Ho un file senza estensione chiamato 'download', c'è un modo per cambiarlo? – Flater

4

Prova questo:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"'>Your Download</a>"; 
document.getElementById('test').click(); 

se si desidera impostare l'uso nome download attributo del tag di ancoraggio:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"' download=yourfilename>Your Download</a>"; 
document.getElementById('test').click(); 
+3

Abbastanza sorprendente ... ma come posso impostare il nome del file? Ho ricevuto "Download" come nome file, senza estensione. –

4

Il seguente metodo funziona in IE11 +, Firefox e Chrome 25+ 30+:

<a id="export" class="myButton" download="" href="#">export</a> 
<script> 
    function createDownloadLink(anchorSelector, str, fileName){ 
     if(window.navigator.msSaveOrOpenBlob) { 
      var fileData = [str]; 
      blobObject = new Blob(fileData); 
      $(anchorSelector).click(function(){ 
       window.navigator.msSaveOrOpenBlob(blobObject, fileName); 
      }); 
     } else { 
      var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str); 
      $(anchorSelector).attr("download", fileName);    
      $(anchorSelector).attr("href", url); 
     } 
    } 

    $(function() { 
     var str = "hi,file"; 
     createDownloadLink("#export",str,"file.txt"); 
    }); 

</script> 

vedere in azione: http://jsfiddle.net/Kg7eA/

Firefox e Chrome supportano l'URI dei dati per la navigazione, che ci consente di creare file navigando verso un URI di dati, mentre IE non lo supporta per motivi di sicurezza.

D'altra parte, IE dispone di API per il salvataggio di un blob, che può essere utilizzato per creare e scaricare file.

+0

Sembra non funzionare più in chrome. Per risolvere il problema, vedi http://stackoverflow.com/a/23956661/945687 che funziona. – ehambright

+0

Dove è possibile trovare spiegazioni su cosa sta succedendo in questo? – shinzou

-1
var isIE = /*@[email protected]*/ false || !! document.documentMode; // At least IE6 
var uri = "some data"; //data in file 
var fileName = "file.i4cvf"; // any file name with any extension 
if (isIE) { 
    var fileData = ['\ufeff' + uri]; 
    var blobObject = new Blob(fileData); 
    window.navigator.msSaveOrOpenBlob(blobObject, fileName); 
} else //chrome 
{ 
    window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 
    window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) { 
     fs.root.getFile(fileName, { 
      create: true 
     }, function (fileEntry) { 
      fileEntry.createWriter(function (fileWriter) { 
       var fileData = ['\ufeff' + uri]; 
       var blob = new Blob(fileData); 
       fileWriter.addEventListener("writeend", function() { 
        var fileUrl = fileEntry.toURL(); 
        var link = document.createElement('a'); 
        link.href = fileUrl; 
        link.download = fileName; 
        document.body.appendChild(link); 
        link.click(); 
        document.body.removeChild(link); 
       }, false); 
       fileWriter.write(blob); 
      }, function() {}); 
     }, function() {}); 
    }, function() {}); 
} 
+0

pls aggiungi una spiegazione più dettagliata - http://stackoverflow.com/help/how-to-answer –

-1

Questo collegamento mi ha aiutato molto e ha risolto il mio problema.soluzione cross browser:

https://www.thewebflash.com/reading-and-creating-text-files-using-the-html5-file-api/

Questa è la parte più rilevante:

if ('msSaveOrOpenBlob' in navigator) { 

    navigator.msSaveOrOpenBlob(textFileAsBlob, fileName); 
} else { 
    var downloadLink = document.createElement('a'); 
    downloadLink.download = fileName; 
    downloadLink.innerHTML = 'Download File'; 
    if ('webkitURL' in window) { 
     // Chrome allows the link to be clicked 
     // without actually adding it to the DOM. 
     downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); 
    } else { 
     // Firefox requires the link to be added to the DOM 
     // before it can be clicked. 
     downloadLink.href = window.URL.createObjectURL(textFileAsBlob); 
     downloadLink.onclick = destroyClickedElement; 
     downloadLink.style.display = 'none'; 
     document.body.appendChild(downloadLink); 
    } 

    downloadLink.click(); 
} 
+0

Un collegamento a una soluzione è il benvenuto, ma per favore assicurati che la tua risposta sia utile senza: [aggiungere contesto intorno al link] (//meta.stackexchange.com/a/8259) in modo che i tuoi colleghi abbiano un'idea di cosa sia e perché è lì, quindi cita la parte più pertinente della pagina a cui stai collegando nel caso in cui la pagina di destinazione non sia disponibile. [Le risposte che sono poco più di un collegamento potrebbero essere eliminate.] (// stackoverflow.com/help/deleted-answers) –

Problemi correlati