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

首先我想说，我读了类似问题的答案，包括这个，但这并没有解决我的问题

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

上面的答案建议使用$（'#myForm'）.html（）。这样做的目的是获取表单的html，但不包括用户输入的任何值。我怎样才能做到这一点

更新

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

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

---

因此，这是我唯一可以使用javascript访问的内容。

您可以将html内容包装在一个变量中，并使用锚定标记将其导出，如下所示

函数CreateHtml（）{
var htmlContent=“”；
htmlContent=“Name-”+$（'#Name'）.val（）+“
”+
“电子邮件-”+$（“#电子邮件”）.val（）+“
”；
$（'btn_download'）.attr（'download'，'sampleFile.html'）；
$（'btn_download'）.attr（'href'，'data:text/html'，+htmlContent）；
$（'btn_download'）.show（）；
}

提交

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

提交

如果我正确地问了我的问题，或者使用“带表单值的innerHtml”而不是“如何将html另存为文件”搜索了现有问题，那么我就会被带到这个链接，其中已经有了很好的答案，这个答案对我来说很有用

$('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);

---

我不能用这个。我说这些模板是由外部应用程序开发的，所以我不知道表单中任何元素的ID。表单总是在某个特定标记中吗？像标签或类似的东西？是的。然后，您可以简单地遍历“report”div中的所有输入类型元素，并将其动态绑定到一个变量。过程的其余部分应该是相同的。我已经更新了答案，如果它有帮助的话。不能使用这个，原因与我对另一个答案的评论相同。请参阅问题的更新。表单是在外部创建的，根据用户报告的内容可以有任何结构，因此我不知道这些表单中有任何id或名称属性。我所知道的唯一一件事是，这些表格总是在一个可能的副本中

$('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);