我如何 *locally* 保存由 javascript 生成的 .html 文件（在 *local* .html 页面上运行）？答案

【问题标题】：How can I *locally* save an .html file generated by javascript (running on a *local* .html page)?我如何 *locally* 保存由 javascript 生成的 .html 文件（在 *local* .html 页面上运行）？
【发布时间】：2014-01-08 00:54:20
【问题描述】：

所以我已经研究了几天，还没有得出任何结论。我正在尝试创建一个（非常）基本的实时博客设置，因为我不想为 CoverItLive 之类的东西付费。我的流程是：本地 HTML 文件 > 云存储（Dropbox/Drive/etc）> 内容页面上的 iframe。所有这些都行得通，而且使用一些 CSS 甚至看起来还不错，尽管方法不那么棒。但事情是这样的：liveblog 本身是由一个 HTML 表格组成的，我必须手动复制/粘贴新行的代码，填写时间戳，写入新消息，然后保存文档（然后与云并显示在 iframe 中）。为了简化这个过程，我制作了另一个 HTML 文件，我打算在本地运行并使用它来自动将条目添加到表中。目前它只是一堆输入框和一些javascript来自动化时间戳并从输入数据中写入表格行。

现在的代码：http://jsfiddle.net/LukeLC/999bH/

我希望从这里做的是找到一种方法，以某种方式将生成的表数据导出到我硬盘上的另一个 .html 文件中。到目前为止，我已经设法得到了这个代码......

    if(document.documentElement && document.documentElement.innerHTML){
       var a=document.getElementById("tblive").innerHTML;
       a=a.replace(/</g,'&lt;');
       var w=window.open();
       w.document.open();
       w.document.write('<pre>&lt;tblive>\n'+a+'\n&lt;/tblive></pre>');
       w.document.close();
       }
    }

...在新窗口中打开生成的表格代码，当然，我可以从那里保存源代码，但重点是从流程中消除类似的步骤。

当我单击“提交”按钮时，如何告诉页面将生成的代码保存到单独的 .html 文件中？ 同样，所有这些都发生在本地，而不是在服务器上。

我对 javascript 不是很好——也许需要一种不同的语言——但我们非常感谢任何帮助。

【问题讨论】：

标签： javascript html

【解决方案1】：

我想你可以这样做：

var myHTMLDoc = "<html><head><title>mydoc</title></head><body>This is a test page</body></html>";
var uri = "data:application/octet-stream;base64,"+btoa(myHTMLDoc);


document.location = uri;

顺便说一句，btoa 可能不是跨浏览器，我认为现代浏览器都有它，但旧版本的 IE 没有。甚至不需要 AFAIK base64。你也许可以逃脱

var uri = "data:application/octet-stream,"+myHTMLDoc;

这样做的缺点是您无法在保存文件时设置文件名

【讨论】：

这几乎可以满足我的要求——我只需要稍微修改一下代码，以确保它包含我需要的所有内容。我希望不必在每次提交时都打开一个新窗口，或者不必处理保存对话框，但如果这些事情无法解决，这仍然比手动完成所有事情要好得多。
我还应该提到，如果您创建一个 a 元素并将其 href 设置为 data-URI，并将下载属性设置为文件名（排序），我想出了一种更改保存名称的方法就像@Pogrindis 所做的那样），然后将其添加到 DOM 并在其上调用 .click()。（在 FF 和 chrome 中测试）
这还能用吗？我在 IE11 中对其进行了测试，但它询问我使用什么程序来打开“数据”。而且，如果我尝试保存它，它会说无法保存。
我刚刚在 Chrome 中测试了它，它运行良好。下载文件的名称设置为download 属性所对应的名称。我不必使用base 64，但在我的情况下我必须使用encodeURIComponent()。

【解决方案2】：

你不能用 javascript 做到这一点，但你可以有一个 HTML5 链接来打开保存对话框：

<a href="pageToDownload.html" download>Download</a>

您可以在 POST 之后在已处理的页面上添加一些智能以使其自动化。

小提琴：http://jsfiddle.net/ghQ9M/

【讨论】：

【解决方案3】：

简单的答案，你不能。由于安全原因，JavaScript 被限制执行此类操作。

最好的方法是调用一个服务器页面来写服务器上的新文件。然后从 javascript 执行一个 POST 请求到服务器页面将您要写入的数据传递到新文件。

如果您希望用户将页面保存到它的文件系统，这是一个不同的问题和实现该问题的最佳方法是通知用户/询问他要保存页面，该页面可能是您的新窗口，就像您正在做的那样w.open()。

让我为你做一些演示：

   //assuming you know jquery or are willing to use it :)
   var html = $("#tblive").html().replace(/</g, '&lt;');

   //generating your download button
   $.post('generate_page.php', { content: html })
      .done(function( data ) {
          var filename = data;

          //inject some html to allow user to navigate to the new page (example)
          $('#tblive').parent().append(
              '<a href="'+filename+'">Check your Dynamic Page!</a>');

          // you data here, is the response from the server so you can return
          // your new dynamic page file name here.
          // and maybe to some window.location="new page";  
      });

在服务器端，类似这样：

<?php 
   if($_REQUEST["content"]){
      $pagename = uniqid("page_", true) . '.html';
      file_put_contents($pagename, $_REQUEST["content"]);
      echo $pagename;
   }
?>

一些注释，我没有测试过这个例子，但它在理论上是有效的。我假设通过这个实现它的工作应该是最小的，假设这解决了你的问题。

【讨论】：

Javascript 在浏览器中有这个限制。
这都是本地的，就像在我的硬盘上运行一样。我也没有在 Windows 中设置和运行任何类型的服务器环境——只是在 Firefox 中打开了一个普通的旧 HTML 文件。我知道 javascript 通常被限制以这种方式导出文件，但我想也许是因为客户端和服务器基本上是同一个，在这种情况下我可能有机会。该解决方案不一定必须是基于 javascript 的，但如果可能的话，我希望它能够在这个本地 HTML 文件中实现所有功能。
限制是由您的浏览器和所有主要浏览器施加的。尽管听起来很愚蠢，但它是有限的，并且没有任何可能的解决方法，除非您开始处理提升的权限调整以修改 Firefox 用户设置......但我强烈不鼓励您这样做，去过那里，做过那个，不要不做，不容易也不好。
感谢您的信息和示例。 jQuery 很好 :) 我现在不在一个可以尝试的地方，但我明天会看看我能做些什么。再次感谢您的意见！

【解决方案4】：

基于服务器的解决方案：

您需要设置一个服务器（或您的 PC）来为您的 HTML 页面提供标题，这些标题告诉您的浏览器下载页面而不是处理 HTML 标记。如果您想在本地计算机上执行此操作，您可以使用诸如 WAMP（或 Mac 的 MAMP 或 Linux 的 LAMP）之类的软件，它基本上是 .exe 中的 Web 服务器。这很麻烦，但它会起作用。

【讨论】：