javascript 我如何*本地*保存由javascript生成的.html文件（在*本地* .html页面上运行）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20985071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I *locally* save an .html file generated by javascript (running on a *local* .html page)?
提问by LukeLC
So I've been researching this for a couple days and haven't come up with anything conclusive. I'm trying to create a (very) rudimentary liveblogging setup because I don't want to pay for something like CoverItLive. My process is: Local HTML file > Cloud storage (Dropbox/Drive/etc) > iframe on content page. All that works, and with some CSS even looks pretty nice despite the less-than-awesome approach. But here's the thing: the liveblog itself is made up of an HTML table, and I have to manually copy/paste the code for a new row, fill in the timestamp, write the new message, and save the document (which then syncs with the cloud and shows up in the iframe). To simplify the process I've made another HTML file which I intend to run locallyand use to add entries to the table automatically. At the moment it's just a bunch of input boxes and some javascript to automate the timestamp and write the table row from the input data.
所以我一直在研究这个几天，还没有想出任何结论。我正在尝试创建一个（非常）基本的实时博客设置，因为我不想为 CoverItLive 之类的东西付费。我的流程是：本地 HTML 文件 > 云存储（Dropbox/Drive/etc）> 内容页面上的 iframe。所有这些都有效，尽管使用了一些不太棒的方法，但使用一些 CSS 甚至看起来还不错。但事情是这样的：liveblog 本身由一个 HTML 表组成，我必须手动复制/粘贴新行的代码、填写时间戳、编写新消息并保存文档（然后与云并显示在 iframe 中）。为了简化这个过程，我制作了另一个我打算在本地运行的 HTML 文件并用于自动将条目添加到表中。目前它只是一堆输入框和一些 javascript 来自动化时间戳并从输入数据中写入表格行。
Code, as it stands now: http://jsfiddle.net/LukeLC/999bH/
代码，就目前而言：http: //jsfiddle.net/LukeLC/999bH/
What I'm looking to do from here is find a way to somehow export the generated table data to another .html file on my hard drive. So far I've managed to get this code...
我希望从这里做的是找到一种方法以某种方式将生成的表数据导出到我硬盘上的另一个 .html 文件。到目前为止，我已经设法获得了这个代码......
if(document.documentElement && document.documentElement.innerHTML){
var a=document.getElementById("tblive").innerHTML;
a=a.replace(/</g,'<');
var w=window.open();
w.document.open();
w.document.write('<pre><tblive>\n'+a+'\n</tblive></pre>');
w.document.close();
}
}
...to open just the generated table code in a new window, and sure, I can save the source from there, but the whole point is to eliminate steps like that from the process.
...在新窗口中仅打开生成的表代码，当然，我可以从那里保存源代码，但重点是从过程中消除类似的步骤。
How can I tell the page to save the generated code to a separate .html file when I click on the 'submit' button?Again, all of this happens locally, not on a server.
当我单击“提交”按钮时，如何告诉页面将生成的代码保存到单独的 .html 文件中？同样，所有这些都发生在本地，而不是在服务器上。
I'm not very good with javascript--and maybe a different language will be necessary--but any help is much appreciated.
我对 javascript 不太擅长——也许需要使用不同的语言——但非常感谢任何帮助。
采纳答案by Nick Beeuwsaert
I suppose you could do something like this:
我想你可以做这样的事情：
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 might not be cross-browser, I think modern browsers all have it, but older versions of IE don't. AFAIK base64 isn't even needed. you might be able to get away with
顺便说一句，btoa 可能不是跨浏览器，我认为现代浏览器都有它，但旧版本的 IE 没有。甚至不需要 AFAIK base64。你也许可以逃脱
var uri = "data:application/octet-stream,"+myHTMLDoc;
Drawbacks with this is that you can't set the filename when it gets saved
这样做的缺点是您无法在保存时设置文件名
回答by Pogrindis
You cant do this with javascript but you can have a HTML5 link to open save dialogue:
你不能用 javascript 做到这一点，但你可以有一个 HTML5 链接来打开保存对话框：
<a href="pageToDownload.html" download>Download</a>
You could add some smarts to automate it on the processed page after the POST.
您可以在 POST 后的处理页面上添加一些智能来使其自动化。
fiddle : http://jsfiddle.net/ghQ9M/
回答by Jo?o Pinho
Simple answer, you can't. JavaScript is restricted to perform such operations due to security reasons.
简单的回答，你不能。出于安全原因，JavaScript 被限制执行此类操作。
The best way to accomplish that, would be, to call a server page that would write the new file on the server. Then from javascript perform a POST request to the server page passing the data you want to write to the new file.
实现这一点的最佳方法是调用一个服务器页面，该页面将在服务器上写入新文件。然后从 javascript 向服务器页面执行 POST 请求，将要写入新文件的数据传递给它。
If you want the user to save the page to it's file system, this is a different
problem and the best approach to accomplish that, would be to, notify the user/ask him
to save the page, that page could be your new window like you are doing w.open().
如果您希望用户将页面保存到它的文件系统，这是一个不同的问题，实现这一目标的最佳方法是通知用户/要求他保存页面，该页面可能是您的新窗口你在做什么w.open()。
Let me do some demonstration for you:
让我为你做一些示范：
//assuming you know jquery or are willing to use it :)
var html = $("#tblive").html().replace(/</g, '<');
//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";
});
On the server side, something like this:
在服务器端，是这样的：
<?php
if($_REQUEST["content"]){
$pagename = uniqid("page_", true) . '.html';
file_put_contents($pagename, $_REQUEST["content"]);
echo $pagename;
}
?>
Some notes, I haven't tested the example, but it works in theory. I assume that with this the effort to implement it should be minimal, assuming this solves your problem.
一些注意事项，我还没有测试过这个例子，但它在理论上是有效的。我认为这样实现它的努力应该是最小的，假设这可以解决您的问题。
回答by Jared
A server based solution:
基于服务器的解决方案：
You'll need to set up a server (or your PC) to serve your HTML page with headers that tell your browser to download the page instead of processing the HTML markup. If you want to do this on your local machine, you can use software such as WAMP(or MAMP for Mac or LAMP for Linux) that is basically a web server in a .exe. It's a lot of hassle but it'll work.
您需要设置一个服务器（或您的 PC）来为您的 HTML 页面提供标题，这些标题告诉您的浏览器下载页面而不是处理 HTML 标记。如果您想在本地机器上执行此操作，您可以使用WAMP（或 MAMP for Mac 或 LAMP for Linux）之类的软件，它们基本上是 .exe 中的 Web 服务器。这很麻烦，但它会起作用。
