Wie kann man eine Datei im Speicher erstellen, die der Benutzer herunterladen kann, aber nicht über den Server?

Question

Gibt es eine Möglichkeit, eine Textdatei auf der Client-Seite zu erstellen und den Benutzer aufzufordern, sie herunterzuladen, ohne dass eine Interaktion mit dem Server erforderlich ist? Ich weiß, dass ich nicht direkt auf den Rechner des Nutzers schreiben kann (Sicherheit und so), aber kann ich eine Datei erstellen und ihn auffordern, sie zu speichern?

Answer 1

Basierend auf der Antwort von @Rick, die sehr hilfreich war.

Sie müssen die Schnur abschneiden data wenn Sie es auf diese Weise teilen möchten:

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

` Leider kann ich die Antwort von @Rick nicht kommentieren, da mein Ansehen bei StackOverflow derzeit gering ist.

Eine Bearbeitungsvorschlag wurde geteilt und abgelehnt.

Answer 2

Die folgende Funktion hat funktioniert.

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

Answer 3

Datei mit oder ohne Erweiterungen herunterladen In dem Beispiel verwende ich JSON. Sie können Ihre Daten und Erweiterungen hinzufügen. Sie können hier "MAC-Adressen.json" verwenden, je nach Wunsch. Wenn Sie eine Erweiterung hinzufügen möchten, fügen Sie diese hinzu, ansonsten schreiben Sie einfach den Dateinamen ohne Erweiterungen.

let myJson = JSON.stringify(yourdata);
    let element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(myJson));
    element.setAttribute('download', 'MAC-Addresses.json');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);

Answer 4

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 also einfach die Funktion auf:

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

Answer 5

Ich würde eine <a></a> Tag und setzen Sie dann den href='path' . Platzieren Sie anschließend ein Bild zwischen den <a> Elemente, damit ich es visuell erkennen kann. Wenn Sie wollten, könnten Sie eine Funktion erstellen, die die href damit es nicht nur ein und derselbe Link ist, sondern ein dynamischer.

Geben Sie den <a> ein Tag id wenn Sie mit Javascript darauf zugreifen wollen.

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