Esiste un modo per creare un file di testo sul lato client e richiedere all'utente di scaricarlo, senza alcuna interazione con il server? So di non poter scrivere direttamente sulla loro macchina (sicurezza e tutto il resto), ma posso creare e chiedere loro di salvarlo?

È possibile utilizzare URI di dati. Il supporto del browser varia; vedi Wikipedia . Esempio:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Il flusso di ottetti è quello di forzare un prompt di download. Altrimenti, probabilmente si aprirà nel browser.

Per CSV, puoi utilizzare:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Prova la demo di jsFiddle .

Soluzione semplice per browser predisposti per HTML5 ...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

uso

download('test.txt', 'Hello world!');

Tutte le soluzioni di cui sopra non funzionavano in tutti i browser. Ecco cosa finalmente funziona su IE 10+, Firefox e Chrome (e senza jQuery o qualsiasi altra libreria):

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

Tieni presente che, a seconda della situazione, potresti anche voler chiamare URL.revokeObjectURL dopo averlo rimosso elem. Secondo i documenti per URL.createObjectURL :

Ogni volta che chiami createObjectURL (), viene creato un nuovo URL oggetto, anche se ne hai già creato uno per lo stesso oggetto. Ognuno di questi deve essere rilasciato chiamando URL.revokeObjectURL () quando non ne hai più bisogno. I browser li rilasceranno automaticamente quando il documento viene scaricato; tuttavia, per prestazioni ottimali e utilizzo della memoria, se ci sono momenti sicuri in cui è possibile scaricarli esplicitamente, è necessario farlo.

Tutti gli esempi sopra riportati funzionano bene in Chrome e IE, ma falliscono in Firefox. Si prega di considerare di aggiungere un ancoraggio al corpo e rimuoverlo dopo il clic.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

Sto usando felicemente FileSaver.js . La sua compatibilità è piuttosto buona (IE10 + e tutto il resto) ed è molto semplice da usare:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

Il seguente metodo funziona in IE11 +, Firefox 25+ e Chrome 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>

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 dei dati, mentre IE non lo supporta per motivi di sicurezza.

D'altro canto, IE ha API per il salvataggio di un BLOB, che può essere utilizzato per creare e scaricare file.

Questa soluzione viene estratta direttamente dal repository github di tiddlywiki (tiddlywiki.com). Ho usato tiddlywiki in quasi tutti i browser e funziona come un fascino:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Repository Github: scarica il modulo saver

Soluzione che funziona su IE10: (avevo bisogno di un file CSV, ma è sufficiente cambiare tipo e nome file in txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Se vuoi solo convertire una stringa per renderla disponibile per il download, puoi provare usando jQuery.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

Il pacchetto js-file-download da github.com/kennethjiang/js-file-download gestisce i casi limite per il supporto del browser:

Visualizza sorgente per vedere come utilizza le tecniche menzionate in questa pagina.

Installazione

yarn add js-file-download
npm install --save js-file-download

uso

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')

Come accennato in precedenza, filesaver è un ottimo pacchetto per lavorare con i file sul lato client. Ma non funziona bene con file di grandi dimensioni. StreamSaver.js è una soluzione alternativa (indicata in FileServer.js) in grado di gestire file di grandi dimensioni:

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

Ad aprile 2014, le API di FileSytem potrebbero non essere standardizzate nel W3C. Chiunque guardi la soluzione con BLOB dovrebbe thread con cautela, immagino.

HTML5 rocce a testa in su

Mailing List W3C sull'API FileSytem

Basato sulla risposta di @Rick che è stato davvero utile.

Devi scapezzare la stringa datase vuoi condividerla in questo modo:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`Mi dispiace non posso commentare la risposta di @ Rick a causa della mia attuale scarsa reputazione in StackOverflow.

Un suggerimento di modifica è stato condiviso e rifiutato.

Siamo in grado di utilizzare l' URL di api, in particolare URL.createObjectURL () , e il Blob API per codificare e scaricare praticamente qualsiasi cosa.

Se il download è piccolo, funziona bene:

document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>`
download.click()
download.outerHTML = ""

Se il download è enorme, invece di utilizzare il DOM, un modo migliore è quello di creare un elemento di collegamento con i parametri di download e attivare un clic.

Notare che l'elemento del collegamento non è stato aggiunto al documento ma il clic funziona comunque! Questo è possibile per creare un download di molte centinaia di Mo in questo modo.

const stack = {
 some: "stuffs",
 alot: "of them!"
}

BUTTONDOWNLOAD.onclick = (function(){
  let j = document.createElement("a")
  j.id = "download"
  j.download = "stack_"+Date.now()+".json"
  j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
  j.click()
})  

<button id="BUTTONDOWNLOAD">DOWNLOAD!</button>

Bonus! Scarica eventuali oggetti ciclici , evita gli errori:

TypeError: valore oggetto ciclico (Firefox) TypeError: conversione

struttura circolare a JSON (Chrome e Opera) TypeError: Circular

riferimento nell'argomento valore non supportato (Edge)

Utilizzo di https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

In questo esempio, scaricare l' documentoggetto come json.

/* JSON.decycle */
if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)}
if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}}
objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})}
return nu}
return value}(object,"$"))}}


document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>`
download.click()

Puoi persino fare uno migliore degli URI: utilizzando Chrome puoi anche suggerire il nome che il file assumerà, come spiegato in questo post sul blog sulla denominazione di un download quando si utilizzano gli URI .

Questa funzione di seguito ha funzionato.

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

Il seguente metodo funziona in IE10 +, Edge, Opera, FF e Chrome:

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

Quindi, basta chiamare la funzione:

saveDownloadedData('test.txt', 'Lorem ipsum');

Per me questo ha funzionato perfettamente, con lo stesso nome file ed estensione scaricati

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

'title' è il nome del file con l'estensione cioè sample.pdf,waterfall.jpg ecc ..

'file64' è il contenuto base64 qualcosa del genere cioè Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Vorrei usare un <a></a>tag quindi impostare il href='path'. Successivamente, posiziona un'immagine tra gli <a>elementi in modo che io possa avere un elemento visivo per vederlo. Se lo desideri, puoi creare una funzione che cambierà ilhref modo che non sia solo lo stesso link ma sia dinamica.

Dai anche <a>un tag idse vuoi accedervi con javascript.

A partire dalla versione HTML:

<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor">
     <img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>

Ora con JavaScript:

*Create a small json file*;

const array = [
     "mp3/tupac_shakur-how-do-you-want-it.mp3",
     "mp3/spice_one-born-to-die.mp3",
     "mp3/captain_planet_theme_song.mp3",
     "mp3/tenchu-intro.mp3",
     "mp3/resident_evil_nemesis-intro-theme.mp3"
];

//load this function on window
window.addEventListener("load", downloadList);

//now create a function that will change the content of the href with every click
function downloadList() {
     var changeHref=document.getElementById("mp3Anchor");

     var j = -1;

     changeHref.addEventListener("click", ()=> {

           if(j < array.length-1) {
               j +=1;
               changeHref.href=""+array[j];
          }
           else {
               alert("No more content to download");
          }
}

Se il file contiene dati di testo, una tecnica che uso è quella di mettere il testo in un elemento textarea e fare in modo che l'utente lo selezioni (fai clic in textarea quindi ctrl-A), quindi copia seguito da un incolla in un editor di testo.