如何使用表单数据创建静态 html 页面？答案

【问题标题】：how to create static html page with form data?如何使用表单数据创建静态 html 页面？
【发布时间】：2014-08-10 15:15:29
【问题描述】：

我有 html 表单，我可以在其中以文本的形式输入数据。按下提交按钮后，应获得将其保存为 html 页面的选项。它应该创建静态 html 页面。最好的方法是什么？

html form cade 可以是这样的。

<form  method="post">
<textarea name="name" rows="2" cols="20"> </textarea >
<input type="submit" value="Submit" />
</form>

【问题讨论】：

您想如何保存数据？在一个文件中？数据库？下载？能不能执行一个服务器脚本，比如PHP、Perl？
我想下载它。我不知道服务器脚本
您可以使用 jQuery 并获取输入并填充同一页面（如果不需要，请删除表单）
这可能与：“在内存中创建一个文件供用户不通过服务器下载”stackoverflow.com/questions/3665115/…
我认为如果不实施服务器端脚本就无法创建文件。最简单的方法是使用 php。 PHP 有一个名为 file_put_contents() 的内置函数。函数中的第一个参数是文件，第二个参数是您希望存储在文件中的字符串数据（您可以使用 post 或 get 方法通过表单提交）

标签： javascript html forms

【解决方案1】：

这是一个松散地基于this answer 的解决方案。当您单击该按钮时，它会在浏览器中打开输入的 html，用户可以保存该 html。

示例 HTML：获取 HTML 页面

Javascript：

var textInput = document.getElementById("textInput");
var getHtml = document.getElementById("getHtml");

getHtml.addEventListener("click", function () {
    var htmlBlob = new Blob([textInput.value], {type: "text/html"});
    window.location.href = window.URL.createObjectURL(htmlBlob);
});

这是jsfiddle 版本

【讨论】：

【解决方案2】：

看看这个库！ https://github.com/eligrey/FileSaver.js 它允许您在客户端生成文件（在本例中为 html 文件）并允许客户端下载它，而无需与服务器交互

【讨论】：