如何仅在客户端生成文本文件并实现下载，无需依赖后端服务器

核心实现逻辑 #

整个流程完全运行在客户端，无需后端服务参与，核心依赖两个原生Web API实现：

• 用Blob API将用户输入的文本内容封装为类文件对象
• 利用<a>标签的download属性触发浏览器本地下载行为，完成后自动清理临时资源

完整可运行代码示例 #

<!-- 页面交互结构 -->
<textarea id="inputText" placeholder="请输入要保存的文本内容" rows="10" cols="60"></textarea>
<br>
<button id="downloadBtn">下载为本地文件</button>

<script>
const downloadBtn = document.getElementById('downloadBtn');

downloadBtn.addEventListener('click', function() {
  // 获取用户输入的内容
  const inputContent = document.getElementById('inputText').value;
  // 空内容校验
  if (!inputContent.trim()) {
    alert('请先输入内容后再执行下载操作');
    return;
  }

  // 封装为Blob对象，指定编码为utf-8避免中文乱码
  const contentBlob = new Blob([inputContent], { type: 'text/plain;charset=utf-8' });
  // 创建临时a标签
  const tempAnchor = document.createElement('a');
  // 生成Blob对应的临时访问地址
  tempAnchor.href = URL.createObjectURL(contentBlob);
  // 配置下载的默认文件名，可自定义修改
  tempAnchor.download = '自定义文本内容.txt';

  // 触发下载
  document.body.appendChild(tempAnchor);
  tempAnchor.click();

  // 清理临时资源，避免内存泄漏
  document.body.removeChild(tempAnchor);
  URL.revokeObjectURL(tempAnchor.href);
});
</script>

自定义扩展说明 #

• 如果需要导出其他格式文件，仅需要修改Blob的type参数和文件名后缀即可：比如导出Markdown文件可设置type为text/markdown，文件名后缀改为.md；导出JSON文件设置type为application/json，后缀改为.json
• 该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），IE仅支持10及以上版本

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