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

Posted 2023-05-07

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

【英文标题】：Open generated text as savable .txt file in new tab

【发布时间】：2020-11-25 04:52:22

【问题描述】：

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

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

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

这可能吗？

【参考方案1】：

经过大量研究，这似乎是最好的。

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

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

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

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

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

---

如果您想在点击时生成（示例由于缺少 *** 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>