没有后端，前端也能下载文件
📋 功能介绍
- 纯前端，不涉及后端或接口
- 点击下载按钮，下载一个html文件(任何文件都可以实现)，打开下载的文件展示一个的html网页
📽️ 演示Treasure-Navigation
💡思路
- 编写对应的字符串信息
- 把字符串信息转成url，赋值给a标签
- a标签设置download属性后，可以下载url中的内容信息
代码实现
- 文本信息可以随意写，最终下载的内容就是下方文本
// 定义一个包含 HTML 内容的字符串
const htmlStr = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航集合</title>
</head>
...... // 此处省略业务代码,有兴趣可以去我的项目中查看
<\/html>
`;
1. URL.createObjectURL下载
// 创建一个 Blob 对象，将 HTML 字符串封装成一个可下载的文件
const htmlStrBolo = new Blob([htmlStr], { type: 'text/html' });
// blob转成url，使用URL.createObjectURL和fileReader都可以
// 创建一个指向 Blob 对象的 URL
const htmlStrUrl = URL.createObjectURL(htmlStrBolo);
// 创建一个链接元素
const aLink = document.createElement('a');
// 设置链接的 href 属性为刚刚生成的 URL
aLink.href = htmlStrUrl;
// 设置下载文件的名称
aLink.download = '下载文件名称.html';
// 触发链接的点击事件，开始下载
aLink.click();
// 释放之前创建的 URL 对象，释放内存
URL.revokeObjectURL(htmlStrUrl);
上面是最推荐一种方式。使用URL.createObjectURL，然后立即手动释放内存URL.revokeObjectURL(htmlStrUrl)性能高效。
2. FileReader.readAsDataURL下载
// 创建一个 Blob 对象，将 HTML 字符串封装成一个可下载的文件
const htmlStrBolo = new Blob([htmlStr], { type: 'text/html' });
// 创建FileReader，可以转换文件格式
const reader = new FileReader()
// 传入被读取的blob对象，并且转换成url形式
reader.readAsDataURL(htmlStrBolo)
reader.onload = (e) => {
// 创建一个链接元素
const aLink = document.createElement('a');
// 设置链接的 href 属性为刚刚生成的 URL
aLink.href = reader.result;
// 设置下载文件的名称
aLink.download = '下载文件名称.html';
// 生成的base64编码
aLink.click();
};
🌟理解URL.createObjectURL和FileReader.readAsDataURL
在web中处理文件和数据是常见的需求。URL.createObjectURL() 和 FileReader.readAsDataURL() 是两个用于处理文件对象的常用方法。他们都是将 File 或 Blob 对象转换成URL的形式。让我们来深入了解它们的用途和区别。
📄FileReader.readAsDataURL
- 功能概述
URL.createObjectURL(myBlob) 可以将 File 或 Blob 对象转换为临时 URL。只要没有销毁，该临时 URL 可以在任何网页中使用，网页将显示对应的 File 或 Blob 信息。 - 生命周期
该 URL 的生命周期与其创建时所在窗口的 document 绑定在一起。一旦关闭原窗口，该临时 URL 将失效。 - 内存管理
可以使用 URL.revokeObjectURL(myUrl) 提前销毁该 URL，以释放内存。
- 代码示例
// 创建blob信息
const htmlStrBlob = new Blob(["Hello World"], { type: 'text/plain' });
// 创建一个指向 Blob 对象的 URL
const htmlStrUrl = URL.createObjectURL(htmlStrBlob);
console.log(htmlStrUrl);
//在执行 revokeObjectURL 之前，htmlStrUrl可以复制到浏览器的地址栏中
URL.revokeObjectURL(htmlStrUrl);
📄FileReader.readAsDataURL
- 功能概述
FileReader.readAsDataURL() 方法用于将 File 或 Blob 对象读取为一个 Base64 编码的字符串。该字符串可以在任意网页中永久使用，网页将显示对应的 File 或 Blob 信息。 - 生命周期
生成的 Base64 字符串的生命周期是永恒的。
- 代码示例
// 创建一个 Blob 信息
const htmlStrBolo = new Blob(["Hello World"], { type: 'text/plain' });
// 创建FileReader，可以转换文件格式
const reader = new FileReader()
// 传入被读取的blob对象，并且转换成url形式
reader.readAsDataURL(htmlStrBolo)
reader.onload = () => {
// 这个reader.result可以复制到浏览器的地址栏中，永远可以查看对应的信息
console.log(reader.result)
}
⚖️ 区别总结
1.生成的 URL 类型
- URL.createObjectURL(): 生成一个临时的对象 URL。
- FileReader.readAsDataURL(): 生成一个 Base64 编码的数据 URL，相对临时的URL会大很多
2.性能
- URL.createObjectURL(): 性能更好，因为不需要将文件内容加载到内存中，可以使用完后立即销毁。
- FileReader.readAsDataURL(): 可能会占用更多内存，特别是在处理大文件时。
作者：前端金熊
来源：juejin.cn/post/7425656340982480936
来源：juejin.cn/post/7425656340982480936
