协慌网

有没有办法在客户端创建文本文件并提示用户下载它，而不与服务器进行任何交互？我知道我不能直接写入他们的机器（安全性和所有），但是我可以创建并提示他们保存它吗？

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

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

所有上述示例在 chrome 和 IE 中都运行良好，但在 Firefox 中失败。请考虑在身体上附加锚并在点击后将其移除。

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