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>

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

相关推荐
geovindu1 小时前
java: Facade Pattern
java·开发语言·后端·外观模式·结构型模式
listening7771 小时前
HarmonyOS 6.1 元服务深度优化:从“秒开”到“常驻”的极致体验
java·开发语言·spring
前端甜糖1 小时前
记录We码开发者工具的一个bug
前端·javascript
布朗克1681 小时前
Go 入门到精通-29-测试与基准
开发语言·后端·golang·测试与基准
猫3281 小时前
echarts 日常问题解决
前端·javascript·echarts
格林威2 小时前
工业相机Chunk功能全解析:图像嵌入时间戳、编码器元数据(附堡盟C#代码)
开发语言·人工智能·数码相机·计算机视觉·c#·视觉检测·工业相机
小大宇2 小时前
Python 集成 Conda
开发语言·python·conda
不简说2 小时前
JS 代码技巧 vol.8 — 20 个函数式编程实战,把 if/else 拍扁的骚操作
前端·javascript·面试
还是奇怪3 小时前
Simon Willison 用 DSPy 优化 Datasette Agent 提示词:提示工程正在变成可测试的软件工程
java·开发语言·软件工程
Cobyte3 小时前
模板 DSL 解析器中的状态机设计
前端·javascript·vue.js