你可以使用 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>
如有其他需求可详细说明!