如何用JavaScript实现Save按钮将HTML文本输入框值保存为独立TXT文件

直接用前端JavaScript就能完成这个需求，不需要后端支持。以下是完整的可运行代码：

<input class="test" type="text" id="test1" value="123">
<button class="savebutton">Save</button>

<script>
document.querySelector('.savebutton').addEventListener('click', function() {
  // 读取输入框内容
  const inputContent = document.getElementById('test1').value;
  
  // 可选：为空时提示用户
  if (!inputContent.trim()) {
    alert('请先输入内容');
    return;
  }

  // 创建纯文本Blob对象
  const textBlob = new Blob([inputContent], { type: 'text/plain' });
  // 创建临时下载链接
  const downloadLink = document.createElement('a');
  
  // 设置下载文件名
  downloadLink.download = 'my_content.txt';
  // 将Blob转换为可访问的URL
  downloadLink.href = URL.createObjectURL(textBlob);
  
  // 触发下载动作
  downloadLink.click();
  
  // 释放URL资源，避免内存泄漏
  URL.revokeObjectURL(downloadLink.href);
});
</script>

关键逻辑说明 #

• 绑定点击事件：通过addEventListener给Save按钮绑定点击回调，确保用户点击时执行保存流程。
• 获取输入值：用getElementById定位输入框，通过.value属性读取用户输入的文本内容。
• Blob对象处理：Blob是浏览器用来存储二进制数据的对象，这里把文本内容包装成text/plain类型的Blob，确保保存为TXT格式。
• 临时下载链接：创建隐藏的<a>标签，设置download属性指定保存的文件名，再通过URL.createObjectURL把Blob转换成浏览器可识别的下载地址。
• 触发下载：模拟点击临时链接，浏览器会自动弹出文件保存对话框，完成下载后释放URL资源。

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