如何使用 javascript 下载包含已填写表格的 html 网页作为 HTML 文件

Question

我有一个包含表单的网页。用户将填写字段表单。

如何将网页另存为包含填充字段的 HTML 文件？

下面的代码将网页下载为 HTML 文件，但字段为空。

<a onClick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)"
   href="#" download="page.html">Download</a>

Answer 1

请检查工作 codepen.io，因为下载功能在 Whosebug 的代码段框架中不起作用。

我只是用自己的值填充每个输入的“值”属性，然后触发下载。

function download(){
  var hiddenElement = document.createElement('a');
  var inputs = document.getElementsByTagName('input')
  for (var i = 0; i < inputs.length; i++)
    inputs[i].setAttribute("value", inputs[i].value);
  hiddenElement.href = 'data:attachment/text,' + encodeURI(document.getElementById("container").innerHTML);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'myFile.html';
  hiddenElement.click();
}

<div id="container">
<input value="" type="text">
<input value="" type="text">
<input value="" type="text">
<button onclick="download()">Download</button>
</div>

如何使用 javascript 下载包含已填写表格的 html 网页作为 HTML 文件

How to download an html webpage containing a filled form as an HTML file using javascript

html

javascript

forms

dom