如何在JavaScript中实现基于用户输入代码的文件下载功能？

嘿，你的需求完全可以用浏览器原生的Blob API和URL.createObjectURL来实现，比你之前打开新页面让用户手动保存的体验好太多了，直接就能触发浏览器的下载弹窗，不用用户额外操作！

先给你看完整的可运行代码：

<!-- HTML结构 -->
<textarea id="codeInput" rows="10" cols="50">// 在这里输入你的代码</textarea>
<button onclick="downloadCode()">保存代码</button>

<script>
function downloadCode() {
  // 1. 获取textarea里的内容
  const codeContent = document.getElementById('codeInput').value;
  // 2. 创建Blob对象，指定内容类型（比如JavaScript文件用text/javascript）
  const blob = new Blob([codeContent], { type: 'text/javascript' });
  // 3. 生成临时下载URL
  const downloadUrl = URL.createObjectURL(blob);
  // 4. 创建隐藏的a标签来触发下载
  const a = document.createElement('a');
  a.href = downloadUrl;
  // 设置下载的文件名，比如"my-code.js"
  a.download = 'my-code.js';
  // 触发点击
  a.click();
  // 5. 清理临时URL，避免内存泄漏
  URL.revokeObjectURL(downloadUrl);
}
</script>

为什么这个方案更好？ #

• 无需打开新页面，用户体验更流畅
• 直接指定文件名和文件类型，不用用户手动修改保存的文件格式
• 完全基于浏览器原生API，兼容性好（几乎所有现代浏览器都支持）

顺便说下你之前代码里的小问题 #

你之前写的代码有几个语法和逻辑错误：

1. document.write("<p>Hi!</p>") 会直接把内容写入当前文档，而不是返回这个字符串给变量x，所以window.replace(x)根本没法正常工作
2. open() { window.open(hi) } 这不是合法的函数定义方式，而且hi变量里的字符串还少了闭合引号，浏览器会报错

用上面的Blob方案就能完美解决你的需求啦！

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