如何为文本区域创建另存为按钮

<form>
  <textarea id="textArea" rows="4" cols="50"></textarea>
  <button id="saveButton">另存为</button>
</form>

document.getElementById("saveButton").addEventListener("click", function() {
  var text = document.getElementById("textArea").value;
  var filename = "saved_text.txt"; // 保存的文件名

  // 创建一个隐藏的a标签，并设置其href属性为保存的文本内容
  var link = document.createElement("a");
  link.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
  link.setAttribute("download", filename);

  // 触发点击事件以下载文件
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

textarea {
  width: 100%;
  height: 200px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}