Wie kann ich eine Datei im Speicher erstellen, die der Benutzer herunterladen kann, anstatt den Server zu durchlaufen?
P粉231112437
P粉231112437 2023-08-23 17:55:41
0
2
549
<p>Gibt es eine Möglichkeit, auf der Clientseite eine Textdatei zu erstellen und den Benutzer zum Herunterladen aufzufordern, ohne dass eine Interaktion mit dem Server erforderlich ist? </p> <p>Ich weiß, dass ich nicht direkt auf ihren Computer schreiben kann (Sicherheit usw.), aber kann ich die Datei erstellen und sie zum Speichern auffordern? </p>
P粉231112437
P粉231112437

Antworte allen(2)
P粉473363527

适用于 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>

使用

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

您可以使用数据 URI。浏览器支持各不相同;请参阅维基百科。示例:

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

八位字节流用于强制下载提示。否则,它可能会在浏览器中打开。

对于 CSV,您可以使用:

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

尝试jsFiddle 演示

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage