Question

首先，我想说我已经阅读了类似问题的答案，包括how to save the content of html form as .html page，但这并没有解决我的问题。

我正在构建一个允许用户使用模板创建报告的报告系统。这些模板是html表单，可以在任何外部应用程序或手动开发。我的应用程序的作用是，它导入这些模板并在创建报告时将它们呈现给用户，并且我希望将提交的报告保存为包含用户选择的所有值的html文件，无论是文本字段还是复选框。

以上回答建议使用$（＆＃39; #myForm＆＃39;）。html（）。这样做是获取表单的html，但不包括用户输入的任何值。我怎样才能做到这一点？

更新

我想说这些模板是由外部应用程序开发的，可能有任何结构，具体取决于用户报告的内容。因此，我不知道表单创建者使用的任何表单输入的任何id或name属性。我所知道的唯一想法是所有形式总是在

中

<div id="reportTemplate"></div>

所以我只能用javascript访问它。

Answer 1

您可以将html内容包装在变量中，然后使用下面的锚标记将其导出。

function CreateHtml() {
  var htmlContent = "";
  htmlContent = "<h1>Name - " + $('#name').val() + "</h1><br>" +
    "<p>Email - " + $('#email').val() + "</p>";

  $('#btn_download').attr('download', 'sampleFile.html');
  $('#btn_download').attr('href', 'data:text/html,' + htmlContent);
  $('#btn_download').show();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input placeholder="Name" id="name" type="text" />
  <br/>
  <input placeholder="Email" id="email" type="text" />
  <br/>
  <button type="button" onclick="CreateHtml();">Submit</button>
  <br>
  <a href="" id="btn_download" hidden>Download</a>
</div>

更新：

function CreateHtml() {
  var htmlContent = TraverseThroughReport();

  $('#btn_download').attr('download', 'sampleFile.html');
  $('#btn_download').attr('href', 'data:text/html,' + htmlContent);
  $('#btn_download').show();

}

function TraverseThroughReport() {
  var elements = document.getElementById("report").elements;
  var htmlContent = "";
  for (var i = 0, element; element = elements[i++];) {
    if (element.type === "text")
      //console.log("it's an empty textfield")
      htmlContent = "<h1>" + element.value + "</h1>";
  }
  //You can add as many conditions for placeholder etc to detect the form element type

  return htmlContent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="report">
  <input placeholder="Name" id="name" type="text" />
  <br/>
  <input placeholder="Email" id="email" type="text" />
  <br/>
  <button type="button" onclick="CreateHtml();">Submit</button>
  <br>
  <a href="" id="btn_download" hidden>Download</a>
</div>

Answer 2

的Javascript

function CreateHtml(){
 var field1 = $("#field1").val();
 var field2 = $("#field2").val();
 var fieldn = $("#fieldn").val();

 var form  = $("#myForm").clone();
 $(form).find("#field1").val(field1);
 $(form).find("#field2").val(field2);
 $(form).find("#fieldn").val(fieldn);

 $('#btn_download').attr('download', 'sampleFile.html');
 $('#btn_download').attr('href', 'data:text/html,' + form);
 $('#btn_download').show();
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input placeholder="field1" id="field1" type="text" />
  <br/>
  <input placeholder="field2" id="field2" type="text" />
  <br/>
  <button type="button" onclick="CreateHtml();">Submit</button>
  <br>
  <a href="" id="btn_download" hidden>Download</a>
</div>

Answer 3

如果我正确地问我的问题或使用＆＃34; innerHtml搜索现有问题，并使用表格值＆＃34;而不是＆＃34;如何将html保存为文件＆＃34;我会被带到这个链接jquery get all form elements: input, textarea & select，已经有很好的答案，这个特别的答案对我有用

$('input:text, input:hidden, input:password').each(function() {
  var v=this.value; 
  $(this).attr("magicmagic_value",v).removeAttr("value").val(v);
});
$('input:checkbox,input:radio').each(function() {
  var v=this.checked; 
  if(v) $(this).attr("magicmagic_checked","checked"); 
  $(this).removeAttr("checked"); 
  if(v) this.checked=true; 
});
$('select option').each(function() { 
  var v=this.selected; 
  if(v) $(this).attr("magicmagic_selected","selected"); 
  $(this).removeAttr("selected");
  if(v) this.selected=true; 
});
$('textarea').each(function() { 
  $(this).html(this.value); 
});

var magic=$('form').html().replace(/magicmagic_/g,"");

$('[magicmagic_value]').removeAttr('magicmagic_value');
$('[magicmagic_checked]').attr("checked","checked").
  removeAttr('magicmagic_checked');
$('[magicmagic_selected]').attr("selected","selected").
removeAttr('magicmagic_selected');
alert(magic);

将html表单保存为带有提交值的html文件

3 个答案: