使用JS将数据从用户输入保存到html文件

时间:2017-04-27 06:07:59

标签: javascript html

我正在寻找一种方法,使用JS将数据从下面的HTML表单保存到单独的HTML文件中。

<!DOCTYPE html>
<html>
  <head>
    <title>SaveAs</title>
  </head>
  <body>
    <form>
      <textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea>
      <br />
      <input type="file" name="pic" id="pic">
      <br />
      <input type="text" name="name" value="" placeholder="File Name">
      <input type="submit" onclick="" value="Save As HTML">
    </form>
  </body>
</html>

感谢任何帮助。提前谢谢!

1 个答案:

答案 0 :(得分:0)

检查一下。

function save() {
	var content, text = document.getElementsByName("text")[0].value;
	var pic = document.getElementById("pic").value, filename = document.getElementsByName("name")[0].value;
	content = text + "<br><br>" + pic;
	
	var a = document.getElementById("a");
	var file = new Blob([content], {type: 'text/html'});
	a.href = URL.createObjectURL(file);
	a.download = filename + ".html";
}
<!DOCTYPE html>
<html>
  <head>
    <title>SaveAs</title>
	<script src="test.js"></script> <!-- script included -->
  </head>
  <body>
    <form>
      <textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea>
      <br />
      <input type="file" name="pic" id="pic">
      <br />
      <input type="text" name="name" value="" placeholder="File Name">
      <a id="a" href="" onclick="save()"><input type="button" value="Save As HTML"></a> <!-- link included, changed input type to button -->
    </form>
  </body>
</html>

希望它有所帮助。