將html格式保存爲提交的值爲html的文件

Question

首先，我想說我已閱讀類似問題的答案，包括此how to save the content of html form as .html page，但這並未解決我的問題。

我正在構建一個報告系統，允許用戶使用模板創建報告。這些模板是HTML表單，可以在我的任何外部應用程序或手動開發。我的應用程序所做的就是導入這些模板，並在創建報告時將它們呈現給用戶，並且我希望將提交的報告保存爲具有用戶所選值（無論是文本字段還是複選框）的html文件。

上面的答案建議使用$（'＃myForm'）。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

如果我問我的問題正確或搜索現有的使用「的innerHTML與表單值」的問題，而不是「如何保存的HTML的文件」我會一直採取此鏈接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);