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>

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

相关推荐
lsx20240610 分钟前
jQuery UI 实例
开发语言
ZC跨境爬虫13 分钟前
UI前端美化技能提升日志day6:(使用苹果字体+计算样式对比差异)
前端·javascript·css·ui·状态模式
Agent手记16 分钟前
终端消费数据自动采集与分析智能体的搭建思路:2026全链路技术架构与实战解析
java·开发语言·人工智能·ai·架构
胡志辉的博客16 分钟前
前端反调试:常见套路、识别方法与绕过思路
前端·javascript·web安全·状态模式·安全威胁分析·代码混淆
-凌凌漆-22 分钟前
【Qt】qt延时
开发语言·qt
AI-小柒31 分钟前
磅上线!DataEyes 聚合平台正式接入 GPT-Image-2,开启多模态 AI 生成全新纪元
大数据·开发语言·数据库·人工智能·gpt·php
gskyi34 分钟前
UniApp Vue3 数据透传终极指南
javascript·vue.js·uni-app
gskyi35 分钟前
uni-app 高阶实战:onLoad与getCurrentPages深度技巧
前端·javascript·vue.js·uni-app
小此方37 分钟前
Re:从零开始的 C++ 进阶篇(四)工业级 C++ 编程:如何构建异常安全的健壮系统?(含案例分析)
运维·开发语言·c++·安全
❆VE❆41 分钟前
python基础篇(一):使用vscode搭建python相关环境
开发语言·vscode·python