crea un file usando javascript in chrome sul lato client

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.

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

Certo che puoi, usando 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() {}); 

Inserisci questo nel browser Chrome

 https://stackoverflow.com/questions/7160720/create-a-file-using-javascript-in-chrome-on-client-side/data:text;charset=utf-8,helloWorld 

Quindi per build il download per i tuoi utenti faresti qualcosa di simile

data='Your Download

Quindi iniettalo nel dom affinché l’utente possa premere.

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

 export  

Vedi questo 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 a fini di sicurezza.

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

Prova questo:

 document.body.innerHTML+="Your Download"; document.getElementById('test').click(); 

se vuoi impostare il nome del file usa l’attributo download del tag anchor:

 document.body.innerHTML+="Your Download"; document.getElementById('test').click(); 

Avrai bisogno di funzionalità lato server per poter fornire all’utente un file di testo (javascript non è sufficiente). È ansible creare uno script lato server che crea il file e utilizzare javascript per richiedere all’utente di salvarlo.

Sul pulsante Invia dall’utente, è ansible creare file sul server e redirect l’utente all’URL del file, da dove dovrebbe essere scaricato automaticamente.

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

Inoltre, le richieste di download dei file provengono dal server, quindi dovrai creare il file sul server e servirlo all’utente, e sperare che lo salvi (se lo richiede è probabile che lo farà) .

Un’altra ansible soluzione da osservare è l’uso di URI di dati o CSV, ma il supporto del browser per loro è incompleto (IE), vedere Creare un file in memoria che l’utente possa scaricare, non tramite il server

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

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