在新选项卡中将生成的文本作为可保存的 .txt 文件打开

Question

我想生成以下字符串的文本文档：

const rawText = `Today is ${new Date()}`;

openInNewTabWithDefaultFilename(rawText, "TodaysDate.txt");

我看过一些关于如何打开新标签页和设置内容的资料：

var newTab = window.open();
newTab.document.title = "Todays Date";
newTab.document.body.innerHTML = `Today is ${new Date()}`;

但这会打开一个带有文本的选项卡，而不是一个文本文件。我希望用户能够简单地将页面保存为文本文件。

这可能吗？

Answer 1

经过大量研究，这似乎已经很不错了。

您无法在可保存的新选项卡中打开文本，更不用说具有默认文件名了。

生成可以查看然后保存的文本文件的唯一方法是使用数据 url，但是 Google 错误地认为它们的整体都是安全威胁（某些是，text/plain绝对不是）。

我发现的最佳解决方法是创建两个 buttons/links，一个用于下载文件，另一个用于查看文件。

如果你想预先生成你的文件，你可以这样做

<a id="DownloadTextFile" download="TodaysDate.txt">Download</a>
<a id="ViewTextFile">View</a>

<script>
const blob = new Blob([`Today is ${new Date()}`], { type: "text/plain" });
const url = URL.createObjectURL(blob);

const view = document.getElementById("ViewTextFile");
const download = document.getElementById("DownloadTextFile");
view.href = download.href = url;
</script>

如果您想在点击时生成（由于缺少 Whosebug iframe 权限，示例将无法运行）

const byId = (id) => document.getElementById(id);

byId("ViewTextFile").addEventListener("click", () => {
  serveTextFile(`Today is ${new Date()}`);
})

byId("DownloadTextFile").addEventListener("click", () => {
  serveTextFile(`Today is ${new Date()}`, "TodaysDate.txt");
});

function serveTextFile(text, downloadAs) {
  const blob = new Blob([text], { type: "text/plain"});
  const url = URL.createObjectURL(blob);

  const domNode = document.createElement('a');
  downloadAs && (domNode.download = downloadAs);
  !downloadAs && (domNode.target = "_blank");
  domNode.href = url;
  domNode.style.display = 'none';
  document.body.appendChild(domNode);
  domNode.click();
  document.body.removeChild(domNode);
}

<div id="DownloadTextFile">Download</div>
<div id="ViewTextFile">View</div>

在新选项卡中将生成的文本作为可保存的 .txt 文件打开

Open generated text as savable .txt file in new tab

javascript

browser

save

text-files