Question

所以我已经研究了几天，并没有提出任何结论。我正在尝试创建一个（非常）基本的liveblogging设置，因为我不想为CoverItLive这样的东西付费。我的流程是：本地HTML文件＆gt;云存储（Dropbox / Drive / etc）＆gt;内容页面上的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标记。如果要在本地计算机上执行此操作，可以使用WAMP（或适用于Mac的MAMP或适用于Linux的LAMP）等基本上是.exe中的Web服务器的软件。这很麻烦，但它会起作用。

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

4 个答案:

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

4 个答案:

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