likes
comments
collection
share

没有后端，前端也能下载文件1.纯前端JavaScript下载文件，点击下载按钮，下载一个文件。 2.理解URL.crea

作者站长头像
站长
· 阅读数 44

📋 功能介绍

  • 纯前端，不涉及后端或接口
  • 点击下载按钮，下载一个html文件(任何文件都可以实现)，打开下载的文件展示一个的html网页

📽️ 演示Treasure-Navigation

没有后端，前端也能下载文件1.纯前端JavaScript下载文件，点击下载按钮，下载一个文件。 2.理解URL.crea

💡思路

  1. 编写对应的字符串信息
  2. 把字符串信息转成url，赋值给a标签
  3. 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

  1. 功能概述 URL.createObjectURL(myBlob) 可以将 File 或 Blob 对象转换为临时 URL。只要没有销毁，该临时 URL 可以在任何网页中使用，网页将显示对应的 File 或 Blob 信息。

  2. 生命周期 该 URL 的生命周期与其创建时所在窗口的 document 绑定在一起。一旦关闭原窗口，该临时 URL 将失效。

  3. 内存管理 可以使用 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

  1. 功能概述 FileReader.readAsDataURL() 方法用于将 File 或 Blob 对象读取为一个 Base64 编码的字符串。该字符串可以在任意网页中永久使用，网页将显示对应的 File 或 Blob 信息。
  2. 生命周期 生成的 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(): 可能会占用更多内存，特别是在处理大文件时。
转载自:https://juejin.cn/post/7425656340982480936
评论
请登录