如何保存通过JavaScript动态创建的HTML表单

完全不需要数据库支持，咱们纯靠前端JavaScript就能把动态生成的表单打包成可下载的HTML页面。下面结合你提供的代码，给你具体的实现方案：

步骤1：启用/添加下载按钮 #

先把你HTML里注释掉的Save按钮启用，或者直接加个新按钮：

<button class="button" type="button" onclick="downloadForm()">下载表单HTML</button>

步骤2：实现下载函数 #

在你的JavaScript代码里添加下面这个函数，它会提取生成好的表单HTML，构建完整的页面结构（包含样式），然后触发下载：

function downloadForm() {
  "use strict";
  // 先检查有没有生成表单
  const generatedForm = document.querySelector('.FormClass');
  if (!generatedForm) {
    alert("请先点击「Gerar」生成表单哦！");
    return;
  }

  // 构建完整的HTML页面，把原页面的样式也嵌进去，保证下载后样式一致
  const fullHtmlContent = `
<!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">
<style>
/* 复制你原有的样式，确保下载页面和原页面样式一致 */
.FormClass {
  width: 100%;
  overflow: hidden;
}
.form {
  margin-bottom: 20px;
  padding: 10px;
  box-sizing: border-box;
}
.form p {
  font-weight: bold;
  margin-bottom: 10px;
}
.form input {
  display: block;
  margin-bottom: 8px;
  padding: 6px;
  width: 100%;
  box-sizing: border-box;
}
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>
</head>
<body>
<div id="main">
${generatedForm.outerHTML}
</div>
</body>
</html>
  `;

  // 创建HTML格式的Blob对象
  const htmlBlob = new Blob([fullHtmlContent], { type: "text/html;charset=utf-8" });
  // 生成下载链接
  const downloadUrl = URL.createObjectURL(htmlBlob);
  const downloadLink = document.createElement('a');
  
  downloadLink.href = downloadUrl;
  // 用你之前获取的表单名称当文件名，没输入的话用默认名
  downloadLink.download = `${Nome || '动态表单'}.html`;
  
  // 触发下载动作
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理临时资源
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
}

额外小提示 #

顺便提一下你代码里的小bug：HTML里的Reset函数写了document.getElementsById("1").reset();，应该改成document.getElementById("1").reset();（去掉Elements里的s），不过这个和下载功能无关，只是顺手帮你指出来～

这样修改后，用户生成表单后点击下载按钮，就能得到一个独立的HTML文件，打开后和原页面的表单样式、结构完全一致，全程不需要后端或数据库参与！

内容的提问来源于stack exchange，提问作者Luis Luis Maia Maia