使用 JavaScript 创建导出函数？答案

【问题标题】：Creating an export function with JavaScript?使用 JavaScript 创建导出函数？
【发布时间】：2017-08-17 17:42:45
【问题描述】：

我正在尝试在 JavaScript 中为打包的 Web 应用程序设置导出函数，该函数将存储在 localStorage 中的字符串转换为纯文本文件以供下载。由于 JavaScript 无法访问计算机的文件系统，我想对其进行设置，以便它创建一个空白文本文件（或者，如果失败，则创建一个简单的 HTML 页面）并在网络浏览器中打开；因为它不会访问任何文件系统，我希望这是可能的。

我正在考虑使用 Data URI 方案将 localStorage 作为纯文本打开，例如：

function exportFile() {
 window.open("data:text/plain;charset=utf-8," + localStorage.WebAppData);
};

但它比我预期的要慢得多，我猜这是因为它将整个文档粘贴在 URL 框中。尽管代码可能不是问题，但某些网络浏览器（例如 Google Chrome）不会让我保存生成的文件。（并且由于某种原因，所有换行符都变成了空格......）

任何解决这些问题的建议或执行类似功能的更好方法将不胜感激！

【问题讨论】：

标签： javascript export local-storage

【解决方案1】：

您是否尝试过类似的方法：

window.open("data:text/plain;charset=utf-8," + localStorage.WebAppData);

对于下载，我想您需要往返于服务器，这将设置一个 mime/type 以使下载框弹出。

编辑：
如果您使用localStorage，则可能是window.postMessage 在您的环境中可用，并且有助于提高速度。

【讨论】：

谢谢。这解决了这个问题，但我仍然想解决一些问题。我已经更新了适合的问题。

【解决方案2】：

为了在使用 window.open 导出的数据中保留换行符，您可以使用 encodeURI 包装您的数据：

var data1 = "Line \n break. And \r\n another one";
window.open("data:application/octet-stream, " + encodeURI(data1));

否则您可以使用 btoa 函数导出以 base64 编码的数据：

var data1 = "Line \n break. And \r\n another one";
window.open("data:application/octet-stream;base64, " + btoa(data1));

【讨论】：

【解决方案3】：

不是真正的解决方案，而是一种变通方法，但你的问题和@Mic 的回答引导我走这条路：

只需使用data:text/html，然后您就可以使用<br /> 插入换行符

我尝试了所有其他方法（unicode 字符的所有组合等）以在text/plain 中获得换行符，但无法让它们显示出来。 document.write() 和 document.body.textContent() 等也遇到同样的问题。换行符会被忽略。
由于 Chrome 无论如何都不会让您保存弹出窗口，因此从中获取文本的唯一方法是复制和粘贴，因此使用 text/plain 而不是 text/html 没有任何好处
在允许您保存页面的 Web 浏览器 (Firefox) 中，您可以选择将页面保存为文本，而不是 HTML，因此您仍然可以获得相同的最终结果。

编辑：这种方法适用于 Chrome，但不适用于 Firefox

win = window.open("", "win")
win.document.body.innerText = "Line \n breaks?"

但必须使用innerText。 InnerHTML 或 textContent 删除换行符。这适用于两者：

win = window.open("", "win")
win.document.body.innerHTML = "<pre>Line \n breaks?</pre>"

所以也许您可以将所有内容都包装在<pre> 标签中？虽然我猜这两个都有与`
建议相同的“问题”，因为它实际上是在创建一个HTML文档而不是一个文本/纯文本。

【讨论】：