HTML表单提交后导出文本/PDF文件问题：导出内容显示为null

我看了你的代码，马上发现几个导致导出内容为null的核心问题，咱们一步步来修复：

问题分析 #

1. 重复的id属性：你给外层div和所有input都用了id="source"，DOM中id必须唯一，document.getElementById("source")只会拿到第一个匹配的元素（就是最外层的div），而div元素根本没有value属性，自然返回null。
2. 错误的内容获取逻辑：你试图从div获取value，但用户输入的数据都在input控件里，得逐个读取这些input的值。
3. 重复的name属性：所有input的name都设为"name"，这既不符合语义，也不利于区分不同字段。

修复方案（文本导出） #

先修正HTML，给每个元素设置唯一的id和语义化的name，再重写JS逻辑来收集表单数据：

<form class="contact100-form validate-form">
  <div id="form-content">
    <div class="wrap-input100 validate-input" required="required">
      <span class="label-input100"><h4>Name</h4></span>
      <input id="fullname" class="input100" type="text" name="fullname" placeholder="enter your full name..." />
    </div>
    <div class="wrap-input100 validate-input" required="required">
      <span class="label-input100"><h4>Your Birthday</h4></span>
      <input id="dob" class="input100" type="text" name="dob" placeholder="write your complete DOB dd-mm-yyyy..." />
    </div>
    <div class="wrap-input100 validate-input" required="required">
      <span class="label-input100"><h4>Contact Number (Primary)</h4></span>
      <input id="contact" class="input100" type="text" name="contact" placeholder="this is most important..." />
    </div>
    <div class="container-contact100-form-btn">
      <div class="wrap-contact100-form-btn">
        <div class="contact100-form-bgbtn"></div>
        <button type="button" id="save" title="Save as text file"> Send </button>
      </div>
    </div>
  </div>
</form>

<script type="text/javascript">
// 当页面加载完成后绑定点击事件
document.getElementById("save").onclick = function () {
  // 定义一个数组来存储表单内容
  let contentLines = [];
  
  // 获取每个input的值并拼接成文本行
  const fullname = document.getElementById("fullname").value.trim();
  if (fullname) contentLines.push(`Name: ${fullname}`);
  
  const dob = document.getElementById("dob").value.trim();
  if (dob) contentLines.push(`Your Birthday: ${dob}`);
  
  const contact = document.getElementById("contact").value.trim();
  if (contact) contentLines.push(`Contact Number (Primary): ${contact}`);
  
  // 把数组转成字符串，每行换行
  const content = contentLines.join("\n");
  
  // 如果没有内容，提示用户
  if (!content) {
    alert("请填写至少一个表单字段！");
    return;
  }
  
  // 创建下载链接并触发下载
  const blob = new Blob([content], { type: "text/plain" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "form-response.txt"; // 设置文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url); // 释放URL资源
};
</script>

代码说明 #

• HTML部分：给每个input设置了唯一的id（fullname、dob、contact）和对应的name，外层div的id改成了form-content避免冲突。
• JS部分：
  • 逐个读取每个input的值，判断非空后添加到内容数组中。
  • 使用Blob和下载链接的方式导出文本，比直接用window.open更可靠，还能指定文件名。
  • 添加了空内容判断，避免导出空文件。

额外需求：导出PDF #

如果需要导出PDF，可以使用jsPDF库（你可以下载库文件到本地引入，或使用公开的CDN资源），下面是简单实现：

<!-- 先引入jsPDF库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script type="text/javascript">
document.getElementById("save").onclick = function () {
  // 获取表单数据，和之前一样
  let contentLines = [];
  const fullname = document.getElementById("fullname").value.trim();
  if (fullname) contentLines.push(`Name: ${fullname}`);
  const dob = document.getElementById("dob").value.trim();
  if (dob) contentLines.push(`Your Birthday: ${dob}`);
  const contact = document.getElementById("contact").value.trim();
  if (contact) contentLines.push(`Contact Number (Primary): ${contact}`);
  
  if (!contentLines.length) {
    alert("请填写至少一个表单字段！");
    return;
  }
  
  // 初始化jsPDF实例
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  
  // 设置字体和起始位置
  doc.setFontSize(12);
  let yPos = 20;
  
  // 逐行添加内容到PDF
  contentLines.forEach(line => {
    doc.text(line, 20, yPos);
    yPos += 10; // 每行间隔10px
  });
  
  // 导出PDF
  doc.save("form-response.pdf");
};
</script>

这样就能正确导出用户填写的表单内容，不管是文本还是PDF啦！

内容的提问来源于stack exchange，提问作者Hemant Prasad