JavaScript魔法课堂:让文本内容瞬间变成可下载文件的绝招

看到不少人想要实现将给定的文本内容以指定的文件名下载到用户的本地电脑上，今天我给大家分享一下我的实现代码：

function saveShareContent(content, fileName) {

// 创建一个隐藏的a元素

let downLink = document.createElement('a');

downLink.style.display = 'none'; // 隐藏链接

downLink.download = fileName;

// 将字符内容转换为blob地址

let blob = new Blob([content]);

downLink.href = URL.createObjectURL(blob);

// 将链接插入到页面并触发点击事件

document.body.appendChild(downLink);

downLink.click();

// 清理资源

URL.revokeObjectURL(blob); // 释放创建的blob URL

document.body.removeChild(downLink);

}

// 使用函数

saveShareContent("你能看到吗？", "12345.txt");

实际效果自己看我的演示图吧。

弹出保存：

保存后打开：

简单给大家解释一下实现步骤吧：

创建一个隐藏的<a>元素，并设置其download属性为传入的文件名，这样点击链接时会触发浏览器的下载行为。

将传递进来的文本内容（字符串形式）转换成Blob对象，Blob是二进制数据的容器，可以表示任何类型的数据。

使用URL.createObjectURL(blob)方法创建一个指向该Blob对象的URL，并将其赋值给a标签的href属性。

将创建好的隐藏a元素添加到文档的body中。

触发click事件来模拟用户点击下载链接，从而开始文件下载。

下载完成后，清理资源：首先使用URL.revokeObjectURL(blob)释放之前创建的Blob URL，然后从DOM中移除隐藏的a元素。

这段代码会将文本"你能看到吗？"保存为名为"12345.txt"的文本文件并提示用户下载。

希望对有将给定的文本内容以指定的文件名下载到用户的本地电脑需要的朋友有帮助。你可以稍微修改下实现将网页中的某些需要的代码下载到本地的，看你发挥啦！