Gibt es eine Möglichkeit, eine Textdatei auf der Clientseite zu erstellen und den Benutzer zum Herunterladen aufzufordern, ohne mit dem Server zu interagieren? Ich weiß, dass ich nicht direkt auf ihren Computer schreiben kann (Sicherheit und alles), aber kann ich sie erstellen und zum Speichern auffordern?

Sie können Daten-URIs verwenden. Die Browserunterstützung variiert. siehe Wikipedia . Beispiel:

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

Der Oktett-Stream soll eine Download-Eingabeaufforderung erzwingen. Andernfalls wird es wahrscheinlich im Browser geöffnet.

Für CSV können Sie Folgendes verwenden:

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

Probieren Sie die jsFiddle-Demo aus .

Einfache Lösung für HTML5-fähige Browser ...

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>

Verwendungszweck

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

Alle oben genannten Lösungen funktionierten nicht in allen Browsern. Folgendes funktioniert schließlich unter IE 10+, Firefox und Chrome (und ohne jQuery oder eine andere Bibliothek):

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

Beachten Sie, dass Sie abhängig von Ihrer Situation möglicherweise auch URL.revokeObjectURL nach dem Entfernen aufrufen möchtenelem . Gemäß den Dokumenten für URL.createObjectURL :

Jedes Mal, wenn Sie createObjectURL () aufrufen, wird eine neue Objekt-URL erstellt, auch wenn Sie bereits eine für dasselbe Objekt erstellt haben. Jedes dieser Elemente muss durch Aufrufen von URL.revokeObjectURL () freigegeben werden, wenn Sie sie nicht mehr benötigen. Browser geben diese automatisch frei, wenn das Dokument entladen wird. Für eine optimale Leistung und Speichernutzung sollten Sie dies jedoch tun, wenn es sichere Zeiten gibt, in denen Sie diese explizit entladen können.

Das obige Beispiel funktioniert in Chrome und IE einwandfrei, schlägt jedoch in Firefox fehl. Bitte denken Sie daran, einen Anker an den Körper anzuhängen und ihn nach dem Klicken zu entfernen.

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

Ich benutze gerne FileSaver.js . Die Kompatibilität ist ziemlich gut (IE10 + und alles andere) und es ist sehr einfach zu bedienen:

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

Die folgende Methode funktioniert in IE11 +, Firefox 25+ und 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>

Sehen Sie dies in Aktion: http://jsfiddle.net/Kg7eA/

Firefox und Chrome unterstützen Daten-URIs für die Navigation, mit denen wir Dateien erstellen können, indem wir zu einem Daten-URI navigieren, während der IE dies aus Sicherheitsgründen nicht unterstützt.

Auf der anderen Seite verfügt der IE über eine API zum Speichern eines Blobs, mit der Dateien erstellt und heruntergeladen werden können.

Diese Lösung wird direkt aus dem Github-Repository von tiddlywiki (tiddlywiki.com) extrahiert. Ich habe Tiddlywiki in fast allen Browsern verwendet und es funktioniert wie ein Zauber:

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

Github Repo: Spar-Modul herunterladen

Lösung, die auf IE10 funktioniert: (Ich brauchte eine CSV-Datei, aber es reicht aus, Typ und Dateiname in txt zu ändern.)

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")

Wenn Sie nur eine Zeichenfolge konvertieren möchten, die zum Herunterladen verfügbar ist, können Sie dies mit jQuery versuchen.

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

Das Paket js-file-download von github.com/kennethjiang/js-file-download behandelt Randfälle für die Browserunterstützung:

Zeigen Sie die Quelle an, um zu sehen, wie die auf dieser Seite genannten Techniken verwendet werden.

Installation

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

Verwendungszweck

import fileDownload from 'js-file-download'

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

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

Wie bereits erwähnt, ist filesaver ein großartiges Paket, um mit Dateien auf der Clientseite zu arbeiten. Bei großen Dateien ist dies jedoch nicht gut. StreamSaver.js ist eine alternative Lösung (auf die in FileServer.js verwiesen wird), die große Dateien verarbeiten kann:

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

Ab April 2014 sind FileSytem-APIs in W3C möglicherweise nicht standardisiert. Jeder, der die Lösung mit Blob betrachtet, sollte mit Vorsicht fädeln, denke ich.

HTML5 rockt den Kopf hoch

W3C-Mailingliste auf der FileSytem-API

Basierend auf @ Rick Antwort, die wirklich hilfreich war.

Sie müssen die Zeichenfolge formen, datawenn Sie sie folgendermaßen freigeben möchten:

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

`Entschuldigung, ich kann die Antwort von @ Rick aufgrund meines derzeit schlechten Rufs in StackOverflow nicht kommentieren.

Ein Bearbeitungsvorschlag wurde geteilt und abgelehnt.

Wir können die URL- API, insbesondere URL.createObjectURL () , und die Blob- API verwenden, um so ziemlich alles zu codieren und herunterzuladen.

Wenn Ihr Download klein ist, funktioniert dies einwandfrei:

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 = ""

Wenn Ihr Download sehr umfangreich ist, können Sie anstelle des DOM ein Linkelement mit den Downloadparametern erstellen und einen Klick auslösen.

Beachten Sie, dass das Linkelement nicht an das Dokument angehängt ist, der Klick jedoch trotzdem funktioniert! Auf diese Weise können Sie einen Download von vielen hundert Mo erstellen.

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! Laden Sie alle zyklischen Objekte herunter und vermeiden Sie die Fehler:

TypeError: zyklischer Objektwert (Firefox) TypeError: Konvertieren

Kreisstruktur zu JSON (Chrome und Opera) TypeError: Circular

Referenz im Wertargument nicht unterstützt (Edge)

Verwenden von https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

In diesem Beispiel wird das documentObjekt als json heruntergeladen .

/* 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()

Sie können sogar eine bessere als nur URIs ausführen. Mit Chrome können Sie auch den Namen der Datei vorschlagen, wie in diesem Blogbeitrag über die Benennung eines Downloads bei Verwendung von URIs erläutert .

Diese Funktion funktioniert.

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

Die folgende Methode funktioniert in IE10 +, Edge, Opera, FF und 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);
    }
}

Rufen Sie einfach die Funktion auf:

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

Für mich hat das perfekt funktioniert, mit dem gleichen Dateinamen und der gleichen Erweiterung, die heruntergeladen wurden

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

‚title‘ ist der Dateiname mit der Erweiterung das heißt sample.pdf, waterfall.jpgetc ..

'file64' ist der base64-Inhalt wie dieser, dh Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Ich würde ein <a></a>Tag verwenden und dann das setzen href='path'. Platzieren Sie anschließend ein Bild zwischen den <a>Elementen, damit ich es visuell sehen kann. Wenn Sie möchten, können Sie eine Funktion erstellen, die das ändert, hrefsodass es nicht nur derselbe Link ist, sondern auch dynamisch.

Geben Sie dem <a>Tag auch ein, idwenn Sie mit Javascript darauf zugreifen möchten.

Beginnend mit der HTML-Version:

<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>

Jetzt mit 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");
          }
}

Wenn die Datei Textdaten enthält, verwende ich eine Technik, die darin besteht, den Text in ein Textbereichselement einzufügen und ihn vom Benutzer auswählen zu lassen (in den Textbereich klicken und dann Strg-A drücken), dann zu kopieren und anschließend in einen Texteditor einzufügen.