js 点击按钮 把文本转成文件并下载下来

你可以使用 JavaScript 创建一个 Blob 文件,并通过动态创建 a 标签来触发下载。下面是一个完整的例子:

HTML 部分

html 复制代码
<button id="downloadBtn">下载文本</button>

JavaScript 部分

javascript 复制代码
document.getElementById('downloadBtn').addEventListener('click', function() {
    // 这里的文本你可以根据需要修改
    const text = "这是要保存的文本内容\n换行也可以哦~";

    // 创建一个 Blob 对象
    const blob = new Blob([text], {type: "text/plain;charset=utf-8"});

    // 创建一个下载链接
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = "保存的文件.txt"; // 设置下载的默认文件名
    document.body.appendChild(a);
    a.click();

    // 移除a标签并释放内存
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});

说明
  • Blob 可以用来把字符串或二进制数据转成文件对象。
  • 创建一个隐藏的 <a> 标签,通过 a.download 属性指定文件名,然后用 JS 模拟点击。
  • 操作完成后及时释放内存和移除标签。

拓展:支持任意文本输入

比如配合 <textarea> 实现任意输入下载:

html 复制代码
<textarea id="content"></textarea>
<button id="downloadBtn">下载文本</button>
<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
    const text = document.getElementById('content').value;
    const blob = new Blob([text], {type: "text/plain;charset=utf-8"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = "myfile.txt";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});
</script>

如有其他需求可详细说明!

相关推荐
鬼手点金5 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
软件技术NINI6 小时前
美妆商城html+Css+js 4页
javascript·css·html
蛋蛋的就会顺顺的6 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
码艺-Alimjan7 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
死磕音视频7 小时前
让小模型做选择题:限定候选项并读取 logits 概率的入门实践(附 Python 代码)
开发语言·python·大模型·文本分类·transformers
顽疲10 小时前
Java vue 养老系统源码详解:月账单 care_month_bill 与 Quartz 扣费 Job 实践
java·开发语言·vue.js·vue养老·springboot养老·java养老
DevUp10 小时前
标着 JavaScript 的 Wiki 与知识库:既不是 CMS 也不是 SSG(番外三)
javascript·node.js·cms
Wang's Blog10 小时前
Java 项目实战: 交友项目 - 安装开发工具与环境准备
java·开发语言·交友
kyriewen10 小时前
我上手了 Vite+ 1.0:Node 不用自己装,lint 却翻车了
前端·javascript·程序员
鹏多多11 小时前
前端是如何死去的?| 完整时间线
前端·javascript·程序员