Wie kann ich eine Datei im Speicher erstellen, die der Benutzer herunterladen kann, anstatt den Server zu durchlaufen?

Question

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?

Ich weiß, dass ich nicht direkt auf ihren Computer schreiben kann (Sicherheit usw.), aber kann ich die Datei erstellen und sie zum Speichern auffordern?

Answer 1

适用于 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!');

Answer 2

您可以使用数据 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 演示。