Javascript：保存文本文件的简单方法？

Question

我想为用户提供保存其结果的机会，如网页上显示的那样。

使用浏览器的“另存为”是不行的，它保存的是html代码，或者其中的一部分，而不是保存页面上显示的内容。即使选项设置为“另存为文本”。有本地链接等

使用 localStorage 会更糟。想象一下告诉用户他的结果位于隐藏目录中的某个位置并且他/她需要解码 sqlite 文件......

我在网上找到的例子：

A) 太复杂了

B) 不起作用

C) 只显示一点代码，让你猜其余的

一些网站提供“打印友好”版本的页面。我可以单击按钮，在新窗口或选项卡中以简洁的视图打开结果列表。然后用户可以“全选”并“复制/粘贴”到他/她最喜欢的文本编辑器。并保存它。

我想做得更好。我想要一个“保存结果”按钮，该按钮可以打开常用的对话框“您想将其保存在哪里？”例如，提供 .txt 和 .rtf 格式之间的选择。

我读过的一些内容似乎暗示这是非法的。如果您可以另存为.exe，我会理解安全风险。但另存为.txt？

Answer 1

你可以这样做：

<a href="#" id="download">Download</a>

<script>
var fileName = "myfile.txt";
var fileContent = "Page content...";
var myFile = new Blob([fileContent], {type: 'text/plain'});

window.URL = window.URL || window.webkitURL;
var dlBtn = document.getElementById("download");

dlBtn.setAttribute("href", window.URL.createObjectURL(myFile));
dlBtn.setAttribute("download", fileName);
</script>

这将要求用户将名为“myfile.txt”的文件保存到他们想要的位置。文件的内容由您决定。

Answer 2

我喜欢CPlusPatch的解决方案；不幸的是，我一直遇到间歇性的安全故障，所有这些故障都引用了 Blob。

我找到了一个非常相似的解决方案here，它不使用Blob，并且我没有遇到任何安全问题。

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

// Start file download.
download("hello.txt","This is the content of my file :)");

此下载功能在文档中创建一个（隐藏）虚拟标签，将其“href”属性设置为您要下载的文件内容，模拟单击添加的标签（触发内容的下载），然后从中删除该标签文档正文。

Answer 3

const link = document.querySelector('a');
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent('insert your text here'));

link.setAttribute('download', 'res.txt');

<a>File</a>

在这里，我们使用 HTML 5 下载属性并对文本的 URI 组件进行编码

Answer 4

您可以重用 javacript windows 打印功能 onclick="window.print();"或者自己写