Wie kann ich eine Datei clientseitig mit JavaScript ohne Serverinteraktion herunterladen?

So laden Sie eine Datei ohne Serverinteraktion mit JavaScript herunter

Beim Erstellen einer Datei, die Benutzer herunterladen können, verhindern Sicherheitsbedenken normalerweise das direkte Schreiben auf ihren Computer. Es ist jedoch möglich, eine Datei zu erstellen und Benutzer zum Speichern aufzufordern, ohne den Server einzubeziehen.

HTML5-Lösung

Für Browser, die HTML5 unterstützen, können Sie den folgenden Code verwenden:

function download(filename, text) {
  // Create an anchor element pointing to the file's content
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  // Hide the anchor element
  element.style.display = 'none';

  // Append the element to the body to enable the download
  document.body.appendChild(element);

  // Simulate a click event to trigger the download
  element.click();

  // Remove the anchor element to prevent further interaction
  document.body.removeChild(element);
}

Verwendung

Verwenden Sie diese Funktion in Ihrem HTML-Code als folgt:

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

Wenn ein Benutzer einen Dateinamen und Dateiinhalt in das Formular eingibt und auf die Schaltfläche „Herunterladen“ klickt, wird die Datei ohne Interaktion mit dem Server heruntergeladen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Datei clientseitig mit JavaScript ohne Serverinteraktion herunterladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!