我有一个使用 javascript 文件创建的动态 html 表单，我要求用户输入字段数量和字段的输入名称。我想知道用户是否可以下载动态创建的表单作为 html 页面。该网站没有数据库。
此代码片段演示了我如何动态创建表单，所有这些都是在客户端完成的。
var Nome; // Nome do esquema
var Desc; // descrição do esquema
var temas = []; // Nome dos temas do form
var fields = []; // nr de campos
var FL= []; // Nome do campo
var FLT =["date","time","number","text"];
var TF =[]; // tipo do campo
var Asset;
var a=0;
function Temas(){
"use strict";
Nome= prompt("Qual o Nome do Esquema de Metadados?");
Desc = prompt("Introduza a Descrição do Esquema.");
Asset = prompt("Introduza o valor da TAG AssetSubtype.");
var nT=prompt("Quantos temas tem o formulário?");
if(nT === null || nT === "") {
alert("User cancelled the prompt.");
} else {
for (var i=0; i<nT; i++){
temas.push(prompt("Introduzir Tema"));
if(temas[i] === null || temas[i] === "") {
alert("User cancelled the prompt.");
}
fields.push(prompt("Quantos campos terá o " + (i+1) + "º tema ?"));
if(fields[i] === null || fields[i] === "") {
alert("User cancelled the prompt.");
}
var f = fields[i];
for( var k=0; k<f; k++){
FL.push(prompt("Qual é o Nome do " + (k+1) + "º campo?"));
if(FL[k] === null || FL[k] === "") {
alert("User cancelled the prompt.");
}
TF.push(prompt("Qual o tipo do " + (k+1) + "º campo? "+
"(Text | Number | Time | Date)"));
if(FL[k] === null || FL[k] === "") {
alert("User cancelled the prompt.");
}
if(TF[k] === FLT[0]) {
TF.push(FLT[0]);
}
if(TF[k] === FLT[1]) {
TF.push(FLT[1]);
}
if(TF[k] === FLT[2]) {
TF.push(FLT[2]);
}
if(TF[k] === FLT[3]) {
TF.push(FLT[3]);
}
}
}
}
alert("Bem sucedido");
}
// Função guardar nome e desc de esquema txt
/*function save(){
var blob = new Blob([Desc], {type: "text/plain;charset=utf-8"});
saveAs(blob, Nome+".txt");
} */
function gerar(){
"use strict";
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"");
f.setAttribute("class", "FormClass");
for(var l=0;l<temas.length; l++){
var div = document.createElement("div");
div.setAttribute('class', 'form');
div.setAttribute('id', "form"+(l+1));
var P = document.createElement('p'); // Heading of Form
P.innerHTML = temas[l];
div.appendChild(P);
for(var j=0;j<fields[l];j++){
var i = document.createElement("input");
i.setAttribute('name', FL[a+j]);
i.setAttribute('type', TF[a+j]);
i.setAttribute('placeholder', FL[a+j]);
div.appendChild(i);
}
a=a+parseInt(fields[l]);
if(l%2===0){
div.style.width='50%';
div.style.float='left';
} else{
div.style.width='48%';
div.style.float='right';
}
f.appendChild(div);
}
document.getElementById('form').appendChild(f);
}<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../CSS/form.css" >
</head>
<script src="../JS/FormDinamico.js"></script>
<script src="../JS/XML.js"></script>
<script src="../JS/XML-HTML.js"></script>
<script>
function Reset() {
document.getElementsById("1").reset();
}
</script>
<style>
button{
background-color: green;
margin-top: 10px;
margin-left: 11%;
border: 5px;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.main{
width:70%;
}
}</style>
<body>
<div id="main">
<button onclick="Temas();" id="gerar1">Criar</button>
<button onclick="gerar();" id="gerar">Gerar</button>
<div id="form">
<!--form here -->
<div id="form7">
<button class="button" type="button">Procurar XML</button>
<button class="button" type="button" name="btnSub" onclick="download(this.form)">Gerar XML</button>
<button class="button" type="button" value="Reset" onclick="Reset();">Reset</button>
<!-- <button class="button" type="button" onclick="download">Save</button> -->
</div>
</div>
</div>
</body>
</html>最佳答案
您可以将其加载到一个新选项卡上，设置 header (只需生成一个带有适当 header 的 DOM 并编写为 html)或使用 html 链接(仅限 HTML5。生成文件所需的服务器端语言)。
参见:
了解更多详情。 您需要执行以下操作之一:
1- 在服务器上编写一个包含动态生成内容的文件，以将其作为可下载响应提供(例如使用 php、c#、java 或服务器允许的任何服务器端编程语言)。
2-“即时”生成可打印文档，例如 .pdf(我没有尝试使用 html 文档，但我认为这也是可能的)并设置 header 以强制浏览器将其解释为可下载。
有一个例子:
<html>
<head>
<title>
</title>
</head>
<body id="html-doc">
<br/>
<form id="main" method="post" action="main.php">
<label>surname: <input type="text" name="surname" /></label><br/><br/>
<label>Comment: <textarea id="text-val" rows="4"><strong>This is the</strong> content of <a href="#">my file</a></textarea></label><br/>
<input type="button" id="dwn-btn" value="submit"/>
<p></p>
<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download all as HTML</a>
</form>
</body>
</html>进行编辑以允许下载整个 HTML 代码。
关于javascript - 如何保存使用javascript动态创建的html表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50568327/