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

Question

所以我已经研究了几天，并没有提出任何结论。 我正在尝试创建一个（非常）基本的liveblogging设置，因为我不想为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不是很好 - 可能需要一种不同的语言 - 但是非常感谢任何帮助。

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

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

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

与此相关的缺点是，在保存文件名时无法设置文件名

Answer 2

您无法使用javascript执行此操作，但您可以使用HTML5链接打开保存对话框：

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

您可以添加一些智能，以便在POST后在已处理的页面上自动化它。

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

Answer 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;
   }
?>

有些说明，我没有测试过这个例子，但它在理论上有效。 我认为，实现它的努力应该是最小的，假设这解决了你的问题。

Answer 4

基于服务器的解决方案

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

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

问题描述

4 个解决方案

解决方案1
4 已采纳 2014-01-08 01:30:02

解决方案2
2 2014-01-08 00:58:01

解决方案3
1 2014-01-08 00:56:47

解决方案4
-1 2014-01-08 01:03:48

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

问题描述

4 个解决方案

解决方案1 4 已采纳 2014-01-08 01:30:02

解决方案2 2 2014-01-08 00:58:01

解决方案3 1 2014-01-08 00:56:47

解决方案4 -1 2014-01-08 01:03:48

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

解决方案1
4 已采纳 2014-01-08 01:30:02

解决方案2
2 2014-01-08 00:58:01

解决方案3
1 2014-01-08 00:56:47

解决方案4
-1 2014-01-08 01:03:48