Question

我有一个用javascript文件创建的动态html表单，我要求用户输入字段数和字段的输入名称。我想知道是否可以让用户下载动态创建的表格作为html页面。该网站没有数据库。

此片段演示了我如何动态创建表单，所有这些都是在客户端完成的。

＆＃13;

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);
}

＆＃13;

<!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>

＆＃13;

Answer 1

您可以将它加载到新标签上，设置标题（只需为其生成带有正确标题的DOM并以html格式编写）或者使用html链接（仅限HTML5。生成文件所需的服务器端lang）。

请参阅：

https://www.designedbyaturtle.co.uk/2016/how-to-force-the-download-of-a-file-with-http-headers-and-php/

了解更多详情。你需要做其中一件事：

1-在服务器上写一个包含动态生成内容的文件，将其作为可下载的响应传递（例如，使用php，c＃，java或服务器允许的任何服务器端编程语言）。

2-“动态”生成可打印的文档，例如.pdf（我没有尝试使用html文档，但我认为它也可以）并设置标题以强制浏览器将其解释为可下载。

有一个例子：

<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

1 个答案: